/*******************************************************************************
 ****   TABLES
 ******************************************************************************/
table thead th {
	background: #606060;
	border-left: 1px solid #999999;
	color: #e1e1e1;
	padding: 2px;
	font-size: 10pt;
}
table thead th:first-child {
	border-left: 0;
}

table a {
	display: block;
	background: #e5e5e5;
	border: 1px solid #9a9a9a;
	color: #003399;
	text-decoration: none;
	margin: 3px;
	padding: 2px;
	padding-left: 5px;
}

table a.soft {
	color: #5e78ad;
	font-style: italic;
	border: 1px solid #cccccc;
}
table a:hover {
	border-color: #a5a5a5;
	background-color: #f5f5f5;
}
table .classOption {
	width: 125px;
	margin: 2px 0;
}
table .classAttr ul {
	position: absolute;
	border: 1px solid #999999;
	border-top: 0;
	background: #e5e5e5;
	margin-top: -3px;
	margin-left: 2px;
	display: none;
}
table .classAttr ul li {
	padding: 4px 6px;
	border-top: 1px solid #999999;
	background: #e5e5e5;
	color: #555555;
	cursor: pointer;
}
table .classAttr ul li:hover {
	color: #3366ff;
	background: #ffffff;
}

table .skill {
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding-top: 7px !important;
	text-align: center;
}

/*******************************************************************************
 ****   LEVEL MENU DROP LIST
 ******************************************************************************/

table .levelMenu {
	float: right;
	background: url(images/iconDropDown.png) left center no-repeat;
	border: 0;
	width: 16px;
	height: 15px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
table .levelMenu:hover {
	background-color: transparent;
	background-position: right;
}
table .menuCol {
	width: 40px;
}

/*******************************************************************************
 ****   TABLE HEADER MENU DROP LIST
 ******************************************************************************/

table .headMenu {
	float: left;
	background: url(images/iconDropDown.png) left center no-repeat;
	border: 0;
	width: 16px;
	height: 15px;
	margin: 0 7px 0 5px;
	padding: 0;
	cursor: pointer;
}
table .headMenu:hover {
	background-color: transparent;
	background-position: right;
}

/*******************************************************************************
 ****   CHARACTER LEVELS
 ******************************************************************************/
#characterTable {
	font-size: 8pt;
	font-family: tahoma, arial, serif, 'san-serif';
	width: 100%;
	margin: 0;
	margin-bottom: 15px;
}
#characterTable td {
	padding: 2px;
	vertical-align: top;
}
#characterTable th {
	background: none;
	color: #68402a;
	color: #483934;
	height: 19px;
	padding-top: 3px;
	padding-bottom: 12px;
	border-left: 1px solid #262E39;
}
#characterTable thead tr {
	background: #f4dca7 url(images/banner_inner.jpg) repeat-x;
	xtext-shadow: 1px 1px 2px #C39246;
}
#characterTable thead th:first-child {
	border: 0;
}
#characterTable .lastLevel td {
	padding-bottom: 30px;
}
#characterTable .number {
	float: left;
	border: 1px solid #cccccc;
	border-right: none;
	background: #ffffff;
	padding: 3px;
	width: 25px;
	text-align: center;
	margin-left: -37px;
}

/*******************************************************************************
 ****   SPECIFIC ICONS
 ******************************************************************************/

.icon_options {
	padding-left: 20px;
	height: 16px;
	background: url(images/icon_options.png) left no-repeat;
}
.icon_plus {
	padding-left: 20px;
	background: url(images/icon_buildinfo.png) left top no-repeat;
}
.icon_save {
	height: 16px;
	padding-left: 20px;
	background: url(images/icon_save.png) left top no-repeat;
}
.icon_validate {
	padding-left: 20px;
	height: 16px;
	background: url(images/icon_summary.png) left top no-repeat;
}
.icon_modify_skills {
	padding-left: 20px;
	height: 16px;
	background: url(images/icon_skills.png) left top no-repeat;
}
.icon_modify_build {
    padding-left: 20px;
    height: 16px;
    background: url(images/icon_build.png) left top no-repeat;
}
.icon_undo {
    padding-left: 20px;
    height: 16px;
    background: url(images/undo.png) left top no-repeat;
}
.icon_redo {
	padding-left: 20px;
	height: 16px;
	background: url(images/redo.png) left top no-repeat;
}

/*******************************************************************************
 ****   BUILDER UTILITIES BAR
 ******************************************************************************/

#utilFade {
	height: 14px;
	width: 950px;
	position: absolute;
	top: -14px;
	left: 0;
	background: url(images/util_fade.png) repeat-x;
}
#utilBar {
	position: fixed;
	bottom: -1px;
	color: white;
	width: 930px;
	padding: 8px 10px 0 10px;
	font-size: .7em;
	min-height: 28px;
	background: #131516 url(images/util_bar.jpg) repeat-x;
}
#utilBar .floatRight .floatLeft {
	margin-left: 12px;
}
#utilBar .bp {
	position: relative;
	z-index: 3;
}
#utilPanel {
	display: none;
	position: absolute;
	z-index: 1;
	bottom: 14px;
	right: 17px;
}

/*******************************************************************************
 ****   BUILD NAME AND DESCRIPTION PANEL
 ******************************************************************************/
 
#buildPanel {
	display: none;
	position: absolute;
	bottom: 13px;
	left: -6px;
	width: 378px;
	height: 418px;
	background: url(images/build_panel_frame.png);
	z-index: 2;
}
#buildPanelInner {
	width: 338px;
	height: 393px;
	background: #595961 url(images/build_panel_inner.jpg);
	margin-top: 6px;
	margin-left: 14px;
	color: white;
}
#buildPanel label span {
	position: absolute;
	left: -999em;
}
#buildPanel label input {
	color: white;
	xtext-shadow: 2px 1px 2px black;
	position: absolute;
	left: 29px;
	top: 27px;
	font: 18px "Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding-left: 4px;
	border: 0;
	background: none;
	width: 304px;
}
#buildPanel .button {
	float: right;
	width: 100px;
	height: 23px;
	cursor: pointer;
	padding: 5px 0;
	padding-bottom: 25px;
	background: url(images/ui_button_100.png) left top no-repeat;
	border: 0;
	color: #e5e5e5;
	position: relative;
	top: 340px;
	margin-right: 15px;
}
#buildPanel .button:hover {
	background-position: right top;
}
#buildPanel textarea {
	color: white;
	xtext-shadow: 1px 1px 2px rgba(0,0,0, 1);
	position: absolute;
	font: 13px "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-family: Georgia, Georgia, serif;
	resize: none;
	left: 29px;
	padding: 4px;
	top: 160px;
	width: 296px;
	height: 150px;
	border: 0;
	background: none;
	
	width: 319px;
	left: auto;
	top: 130px;
	height: 175px;
	padding: 10px;
}
#buildPanel p {
	width: 319px;
	position: absolute;
	top: 95px;
	margin: 10px;
	color: #46C12D;
	font-size: 8pt;
}
#buildPanel ul {
	position: absolute;
	top: 80px;
	display: inline;
	margin-left: 10px;
}
#buildPanel li {
	float: left;
	border: 1px solid #181D20;
	background: #212A29;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
#buildPanel li a {
	display: block;
	text-decoration: none;
	color: #e5e5e5;
	padding: 2px 10px;
}
#buildPanel .selected {
	background-color: #44616E;
	margin-top: -4px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#buildPanel li:hover {
	background-color: #00434C;
}

/*******************************************************************************
 ****   GENERIC BUTTONS
 ******************************************************************************/

/* Button with plus/minus icon */
.bp {
	background: url(images/button2.png) right top no-repeat;
	max-width: 329px;
	/* it'd be nice to find a way to include a bgcolor */
	/* background-color: #49494f; */
	-moz-user-select: none;
	user-select: none;
	/* for IE use onselectstart="return false;"	on the element */
}
.bp .bpi {
	margin: 0;
	background: url(images/button2.png) left -22px no-repeat;
	height: 19px;
	padding: 3px 10px 0 5px;
	margin-left: -3px;
}
.bp:hover {
	background-position: right -44px;
}
.bp:hover .bpi {
	background-position: left -66px;
}

/*******************************************************************************
 ****   GENERIC SLATE PANEL
 ******************************************************************************/

/* Max internal size is 326 by 200 */
/* fixme: make this wider, taller */
.panel {
	max-width: 326px;
	max-height: 200px;
	min-width: 60px;
	min-height: 50px;
	xtext-shadow: 1px 1px 2px black;
}
.panel .tc {
	background: url(images/slate_frame.png) right top no-repeat;
}
.panel .tr {
	background: url(images/slate_frame.png) right -40px no-repeat;
	margin-right: -22px;
}
.panel .tl {
	/* sets the height for all three top divs */
	height: 9px;
	background: url(images/slate_frame.png) left -40px no-repeat;
	margin-left: -9px;
	/* padding required for .tl and .bl to expand elements enough
	   to draw the background in IE7. */
	padding-left: 15px;
}
.panel .mc {
	background: url(images/slate_inner.jpg) right bottom repeat-x;
	min-width: 120px;
}
.panel .mr {
	background: url(images/slate_frame.png) right bottom no-repeat;
	margin-right: -22px;
}
.panel .ml {
	background: url(images/slate_frame.png) left bottom no-repeat;
	margin-left: -9px;
	/* internal padding for the faux box */
	padding: 0 17px 0 3px;
}
.panel .bc {
	background: url(images/slate_frame.png) right -10px no-repeat;
}
.panel .br {
	background: url(images/slate_frame.png) right -50px no-repeat;
	margin-right: -22px;
}
.panel .bl {
	background: url(images/slate_frame.png) left -50px no-repeat;
	/* sets the height for all three top divs */
	height: 21px;
	margin-left: -9px;
	padding-left: 15px;
}
.panel a {
	display: block;
	padding: 5px 10px;
	border-top: 1px solid #757575;
	text-decoration: none;
	color: #e5e5e5;
	xtext-shadow: 1px 1px 2px black;
}
.panel a:first-child {
	border-top: 0;
}
.panel a:hover {
	background: url(images/overlay_white_15.png) left top no-repeat;
}

/*******************************************************************************
 ****   EXTRA
 ******************************************************************************/
#characterTable .featsAuto {
	width: 200px;
}
#characterTable .featsAuto li {
	list-style-type: none;
	background: url(images/bullet_black.png) -5px center no-repeat;
	padding: 1px 2px;
	padding-left: 10px;
	font-size: 8pt;
    color: #e5e5e5;
}

#characterTable .dragger {
	background-color: #000000;
	width: 10px;
	height: 16px;
	cursor: move;
	float: left;
}

.classLevel {
	position: absolute;
	border: 1px solid #cccccc;
	width: 16px;
	height: 16px;
	padding: 2px;
	padding-top: 3px;
	text-align: center;
	background-color: #ffffff;
	color: #666666;
}

/*******************************************************************************
 ****   CLASS ROW STYLING
 ******************************************************************************/
table tbody .classAttr {
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
}
.classSelect {
	xtext-shadow: 1px 1px 2px rgba(0,0,0, .7);
	x-moz-box-shadow: 1px 1px 2px rgba(0,0,0, .25);
	webkit-box-shadow: 1px 1px 2px rgba(0,0,0, .25);
}

.class0 td ,
.class1 td ,
.class2 td ,
.class3 td ,
.class4 td {
	border-bottom: 1px solid #454545;
	color: #e5e5e5;
}
.class0:hover .levelDrag,
.class1:hover .levelDrag,
.class2:hover .levelDrag,
.class3:hover .levelDrag,
.class4:hover .levelDrag {
	display: block;
}
.class0 .classSelect ,
.class1 .classSelect ,
.class2 .classSelect ,
.class3 .classSelect ,
.class4 .classSelect {
	color: #e5e5e5;
	background: #ffffff;
	border: 1px solid #999999;
	height: 15px;
	margin: 0;
	width: 140px;
	margin-top: 2px;
	margin-right: 10px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.class0 .classSelect span ,
.class1 .classSelect span ,
.class2 .classSelect span ,
.class3 .classSelect span ,
.class4 .classSelect span {
	color: #e5e5e5;
	float: right;
	margin-right: 0;
	margin-top: 0;
	height: 15px;
	width: 15px;
	text-align: center;
}

.level {
	background: #e5e5e5;
	border: 1px solid #c5c5c5;
	xtext-shadow: 1px 1px 2px black;
	height: 15px;
	margin: 0;
	padding: 2px;
	text-align: center;
	margin-top: 2px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.levelDrag {
	border: 1px solid #596b85;
	border-right: 0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	position: absolute;
	margin-left: -20px;
	margin-top: -3px;
	padding: 2px;
	height: 15px;
	width: 15px;
	padding-right: 5px;
	background: url(images/move.png) left center no-repeat;
	display: none;
}

.BABHead {
	width: 60px;
}
.attrHead {
	font-size: 7pt;
	width: 23px;
}
.attrCell {
	width: 15px;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding: 0;
}
.attrSelect,
.attrDisplay {
	margin: 0;
	padding: 4px 2px;
	text-align: center;
	background-color: transparent;
	border-color: transparent;
	color: #e5e5e5;
}
.attrDisplay {
	color: #a5a5a5;
	font-size: 7pt;
}
.attrSelect {
	cursor: pointer;
	border: 1px solid transparent;
}
.attrDisplay:hover {
	background-color: transparent;
	border-color: transparent;
}
.attrSelect:hover {
	background-color: transparent;
}
.attrCell .selected {
	background-color: #151515;
	border: 1px solid #555555;
	font-weight: bold;
	color: #f5f5f5;
}

/* Class 0 - Default */
.class0 {
	background-image: url(images/ui_class_0.jpg);
}
.class0 td {
	border-color: #333333;
}
.class0 .attrSelect {
	border-color: #333333;
}
.class0 .levelDrag,
.class0 .classSelect,
.class0 .level {
	background-color: #555555;
	border-color: #333333;
	color: #e5e5e5;
}
.class0 .attrSelect.selected,
.class0 .classOption,
.class0 .classFeat {
	background-color: #444444;
	border-color: #333333;
	color: #e5e5e5;
}
.class0 .attrSelect:hover,
.class0 .classSelect:hover,
.class0 .classOption:hover,
.class0 .level:hover,
.class0 .classFeat:hover,
.class0 .level:hover .levelDrag {
	background-color: #666666;
}
.class0 .skillSelect .skill_none:hover,
.class0 .skillSelect div {
	background-color: #666666;
	border-color: #444444;
}
.class0 .skillSelect .skill_none {
	background-color: #444444;
	color: #444444;
}

/* Class 1 */
.class1 {
	background-image: url(images/ui_class_1.jpg);
}
.class1 td {
	border-color: #262e39;
}
.class1 .levelDrag,
.class1 .classSelect,
.class1 .level {
	background-color: #3e4959;
	border-color: #596b85;
	color: #e5e5e5;
}
.class1 .attrSelect.selected,
.class1 .classOption,
.class1 .classFeat {
	background-color: #222933;
	border-color: #596b85;
	color: #e5e5e5;
}
.class1 .attrSelect:hover,
.class1 .classSelect:hover,
.class1 .classOption:hover,
.class1 .level:hover,
.class1 .classFeat:hover,
.class1 .level:hover .levelDrag {
	background-color: #596b85;
}
.class1 .skillSelect .skill_none:hover,
.class1 .skillSelect div {
	background-color: #596b85;
	border-color: #222933;
}
.class1 .skillSelect .skill_none {
	background-color: #222933;
	color: #222933;
}

/* Class 2 */
.class2 {
	background-image: url(images/ui_class_2.jpg);
}
.class2 td {
	border-color: #2a382f;
}
.class2 .levelDrag,
.class2 .classSelect,
.class2 .level {
	background-color: #45594c;
	border-color: #62806c;
	color: #e5e5e5;
}
.class2 .attrSelect.selected,
.class2 .classOption,
.class2 .classFeat {
	background-color: #26332b;
	border-color: #62806c;
	color: #e5e5e5;
}
.class2 .attrSelect:hover,
.class2 .classSelect:hover,
.class2 .classOption:hover,
.class2 .level:hover,
.class2 .classFeat:hover,
.class2 .level:hover .levelDrag {
	background-color: #62806c;
}
.class2 .skillSelect .skill_none:hover,
.class2 .skillSelect div {
	background-color: #62806c;
	border-color: #26332b;
}
.class2 .skillSelect .skill_none {
	background-color: #26332b;
	color: #26332b;
}

/* Class 3 */
.class3 {
	background-image: url(images/ui_class_3.jpg);
}
.class3 td {
	border-color: #392e2b;
}
.class3 .levelDrag,
.class3 .classSelect,
.class3 .level {
	background-color: #594845;
	border-color: #806762;
	color: #e5e5e5;
}
.class3 .attrSelect.selected,
.class3 .classOption,
.class3 .classFeat {
	background-color: #342a28;
	border-color: #806762;
	color: #e5e5e5;
}
.class3 .attrSelect:hover,
.class3 .classSelect:hover,
.class3 .classOption:hover,
.class3 .level:hover,
.class3 .classFeat:hover,
.class3 .level:hover .levelDrag {
	background-color: #806762;
}
.class3 .skillSelect .skill_none:hover,
.class3 .skillSelect div {
	background-color: #806762;
	border-color: #342a28;
}
.class3 .skillSelect .skill_none {
	background-color: #342a28;
	color: #342a28;
}

/* Class 4 */
.class4 {
	background-image: url(images/ui_class_4.jpg);
}
.class4 td {
	border-color: #22383d;
}
.class4 .levelDrag,
.class4 .classSelect,
.class4 .level {
	background-color: #315359;
	border-color: #477780;
	color: #e5e5e5;
}
.class4 .attrSelect.selected,
.class4 .classOption,
.class4 .classFeat {
	background-color: #1c2f33;
	border-color: #477780;
	color: #e5e5e5;
}
.class4 .attrSelect:hover,
.class4 .classSelect:hover,
.class4 .classOption:hover,
.class4 .level:hover,
.class4 .classFeat:hover,
.class4 .level:hover .levelDrag {
	background-color: #477780;
}
.class4 .skillSelect .skill_none:hover,
.class4 .skillSelect div {
	background-color: #477780;
	border-color: #1c2f33;
}
.class4 .skillSelect .skill_none {
	background-color: #1c2f33;
	color: #1c2f33;
}

/* Empty Feat Text */
.class1 .empty { color: #444B55; }
.class2 .empty { color: #48554d; }
.class3 .empty { color: #564c4a; }
.class4 .empty { color: #3e4f55; }
.class0 .empty { color: #999999; }

#characterTable thead .classFeat {
	width: 210px;
}
#characterTable thead .classAuto {
	width: 200px;
}

.levelMenuList {
	position: absolute;
	display: none;
	border: 2px solid #a5a5a5;
	background: #e5e5e5;
	margin-top: -3px;
	margin-left: 2px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
}
.levelMenuList .levelMenuFrame {
	border: 2px solid #000000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
.levelMenuList .menuOption {
	font-size: 8pt;
	padding: 4px 6px;
	border-top: 1px solid #c5c5c5;
	color: #555555;
}
.levelMenuList .menuOption:first-child {
	border-top: 0;
}
.levelMenuList .menuOption:hover {
	color: #3366ff;
}
.levelMenuList .menuOption:hover .menuListGo {
	background-position: right top;
}
.cloneClassName {
	font-weight: bold;
	color: #111111;
}
.levelMenuList input {
	border: 1px solid #cccccc;
	padding: 1px;
	font-size: 7pt;
	margin: 0;
	text-align: center;
}
.menuListGo {
	float: right;
	width: 16px;
	height: 16px;
	margin-left: 5px;
	background: url(images/menuGo.png) left top no-repeat;
	cursor: pointer;
}

/*******************************************************************************
 ****   AJAX PROCESSING
 ******************************************************************************/
#processing {
	position: fixed;
	left: 20%;
	atop: 30%;
	bottom: 0;
	width: 700px;
	height: 67px;
	background: url(images/ui_loading.png) left top no-repeat;
	
}
#processingLabel {
	position: absolute;
	padding: 10px;
	color: #000000;
	font-size: 10pt;
	font-weight: bold;
	margin-top: 29px;
	font-family: tahoma, arial, serif, san-serif;
	width: 700px;
	text-align: center;
	letter-spacing: .1em;
}
#processingLabel span {
	display: block;
	width: 700px;
	margin-left: -2px;
	margin-top: -1px;
	position: absolute;
	color: #ffffff !important;
	letter-spacing: .1em;
}
#progress {
	position: fixed;
	bottom: 0;
	background: url(images/ui_loading_fill.png) left top no-repeat;
	width: 100px;
	height: 67px;
}
#processingContent {
	border: 1px solid #7f746b;
	color: #a5a5a5;
	background: #050505 url(images/ui_icon_question.png) 15px center no-repeat;
	padding: 10px;
	padding-left: 50px;
	font-size: 10pt;
	position: absolute;
	width: 500px;
	height: 47px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	left: 30%;
	top: 60%;
}
#processingContent a {
	color: #e5e5e5;
	padding-right: 20px;
	margin-top: 5px;
}

/*******************************************************************************
 ****   FEAT SELECTION
 ******************************************************************************/
#login,
#selection {
	position: fixed;
	z-index: 21;
	top: 10%;
	border: 3px solid #1f2123;
	padding: 5px;
	background: #151515 url(images/ui_dark_rock.jpg);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 10pt;
	width: 700px;
}

#login .selectionInner,
#selection .selectionInner,
#build_info .selectionInner {
	margin: 5px;
	margin-top: -5px;
	border: 1px solid #a5a5a5;
	background: #191b1e;
	height: 500px;
	color: #d5d5d5;
	font-family: verdana, tahoma, arial, serif, san-serif;
}
#login .selectionContent,
#login .selectionContentFrame {
	padding: 0;
	width: 380px;
	height: 500px
}
#login table td {
	padding: 3px;
}

/* BUILD INFORMATION */
#build_info .selectionInner {
	height: 480px;
}
#build_info {
	position: fixed;
	z-index: 21;
	top: 15%;
	top: 0;
	border: 3px solid #1f2123;
	padding: 5px;
	background: #151515 url(images/ui_dark_rock.jpg);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 10pt;
	width: 700px;
}
#build_info .selectionContentFrame {
	width: auto;
	padding: 0;
}
#build_info .build_name {
	padding: 20px;
}
#build_info .build_name span {
	font-weight: bold;
}
#build_info .build_name input {
	padding: 2px 3px 3px 3px;
	width: 300px;
	font-size: .9em;
	background: #151515;
	border: 1px solid #a5a5a5;
	color: #e5e5e5;
	margin-left: 10px;
}
#build_info .build_tabs {
	padding: 0;
}
#build_info .build_tabs .tab {
	float: left;
	text-align: center;
	border: 1px solid #555555;
	border-bottom: 0;
	padding: 5px 10px;
	margin-left: -1px;
	position: relative;
	cursor: pointer;
	
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
#build_info .build_tabs .tab:first-child {
	border-left: 1px solid #a5a5a5;
	margin-left: 0;
}
#build_info .build_tabs .tab:hover {
	background: #151515;
	color: #46C12D;
}
#build_info .build_tabs .tab.selected {
	background: #151515;
	border-color: #a5a5a5;
	color: #46C12D;
	z-index: 10;
}
#build_info .tab_content {
	margin-top: -1px;
	border: 1px solid #a5a5a5;
	background: #151515;
	margin-right: 3px;
	position: relative;
	width: 660px;
}
#build_info .tab_content textarea {
	float: left;
	width: 421px;
	height: 300px;
	background: #191B1E;
	border: 1px solid #555555;
	color: #e5e5e5;
	margin: 10px;
	margin-top: 0;
}
#build_info .tab_content .tab_info {
	padding: 10px;
}
#build_info a.button {
	text-decoration: none;
	text-align: center;
	float: right;
	clear: none;
	margin: 15px 10px 0 0;
	padding: 5px 0;
}
#build_info .tab_info {
	color: #596B85;
	font-size: .9em;
}
#build_info .tab_footer p {
	padding: 3px;
	margin: 0;
	font-size: .85em;
	color: #596B85;
}
#invalid_build_name {
	float: right;
	font-size: .9em;
	color: #FD4A13;
	padding: 3px;
	display: none;
}
#invalid_build_name div {
	float: left;
	width: 25px;
	height: 16px;
	margin-right: 5px;
	background: url(images/validation_pointer_left.png) left top no-repeat;
}
.tags_existing {
	float: left;
	width: 250px;
	padding: 10px;
	overflow: auto;
	height: 237px;
	margin-bottom: 10px;
}
.tags_existing label {
	display: block;
	border: 1px solid #333333;
	padding: 4px;
	font-size: .8em;
	cursor: pointer;
	margin: 1px 0;
	clear: left;
}
.tags_existing label.selected,
.tags_existing label:hover {
	background: #44616E;
	border: 1px solid #c5c5c5;
}
.tags_existing input {
	float: left;
	margin-top: 1px;
	margin-right: 5px;
}
.tags_new {
	float: left;
	width: 370px;
	padding: 10px;
}
.tags_new span {
	font-size: .85em;
	line-height: 1.7em;
	margin: 3px;
	display: block;
}
#build_info #new_tags {
	width: 350px;
	height: 120px;
}

#selectAbilities {
	position: fixed;
	z-index: 21;
	top: 15%;
	border: 3px solid #1f2123;
	padding: 5px;
	background: #151515 url(images/ui_dark_rock.jpg);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 10pt;
	width: 700px;
}

#selectAbilities .selectionInner {
	margin: 5px;
	margin-top: -5px;
	border: 1px solid #a5a5a5;
	background: #191b1e;
	height: 400px;
	color: #d5d5d5;
	font-family: verdana, tahoma, arial, serif, san-serif;
}

#selectAbilities thead th {
	height: 1%;
	text-align: center;
}
#selectAbilities thead th:first-child {
	text-align: left;
}
#selectAbilities tbody td {
	text-align: center;
	border-left: 1px solid #555555;
	border-bottom: 1px solid #555555;
}
#selectAbilities tbody td:first-child {
	text-align: left;
	border-left: 0;
	padding-left: 10px;
}
#selectAbilities tfoot td {
	text-align: center;
}
#selectAbilities tbody a {
	background: transparent left top no-repeat;
	display: block;
	float: left;
	width: 23px;
	height: 23px;
	text-align: center;
	padding: 0;
	margin: 0 5px;
	border: 0;
}
#selectAbilities tbody a:hover {
	background-position: right top;
}
#selectAbilities tfoot td {
	padding-left: 5px;
}
#selectAbilities tfoot a {
	float: left;
	width: 100px;
	height: 23px;
	margin: 5px;
	cursor: pointer;
	padding: 0;
	padding-top: 5px;
	background: url(images/ui_button_100.png) left top no-repeat;
	border: 0;
	color: #e5e5e5;
}
#selectAbilities tfoot a:hover {
	background-position: right top;
}
.attrBase {
	width: 120px;
	font-weight: bold;
}
#selectAbilities tbody a.plus {
	background-image: url(images/ui_plus.png);
}
#selectAbilities tbody a.minus {
	background-image: url(images/ui_minus.png);
}
#attrPoints {
	text-align: center !important;
	font-weight: bold;
}

.head_attr {
	float: left;
	height: 16px;
	width: 16px;
	padding: 2px;
	padding-top: 3px;
	padding-left: 8px;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	margin: 0 15px 0 5px;
}

.selectionInner > ul,
.selectionInner > table {
	float: left;
	width: 300px;
	height: 100%;
	overflow: auto;
	border-right: 1px solid #a5a5a5;
}
.selectionInner > table {
	width: 343px;
}

.selectionContentFrame {
	margin-left: 300px;
	overflow: auto;
	height: 480px;
	padding: 10px;
	width: 367px;	
	margin: 0;
}
#selectAbilities .selectionContentFrame {
	height: 380px;
	margin-left: 0 !important;
}
.selectionContent {
	padding: 10px;
}
#selectAbilities .selectionContentFrame {
	margin-left: 320px;
	width: 325px;
}

.selectionInner .selectionHide ul {
	display: none;
}
.selectionInner ul li {
	background: url(images/ui_list_header.png) left top repeat-x;
	border-bottom: 1px solid black;
	font-size: 10pt;
	cursor: pointer;
}
.selectionInner ul li .selected {
	background-color: #333333;
}
.selectionInner ul li span {
	display: block;
	padding: 4px 10px 6px 10px;
	letter-spacing: .15em;
    font-size: .8em;
    color: #bbbbbb;
    font-weight: bold;
}

.selectionInner ul li ul li {
	font-size: 8pt;
	border-bottom: 1px solid #353535;
	padding-left: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: #191b1e url(images/icons/ia_use.png) left bottom no-repeat;
    white-space: nowrap;
    overflow: hidden;
}
.selectionInner ul li ul li.noIcon {
	padding-left: 10px;
}
.selectionInner ul li ul li:hover {
	background-color: #0D121A;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding-top: 7px;
    color: #EFA837;
}

.selectionInner .disabled {
	color: #555555;
	font-style: italic;
}

#overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(images/overlay.png);
	z-index: 20;
}

.cT span
{
	display: block;
	padding-left: 95px;
	margin-bottom: 5px;
}

.cT .head
{
	float: left;
	clear: left;
	font-weight: bold;
	padding: 0;
}

.dmDesc span,
.dmAbil span,
.dmSpell span,
.scDesc span,
.scPro span,
.scNote span,
.fmDesc span,
.fmPro span
{
	padding: 0;
	float: none;
	clear: none;
	margin-bottom: 10px;
}

.scNote span {
	font-style: italic;
}

/*******************************************************************************
 ****   UI
 ******************************************************************************/
.selectionClose {
	float: right;
	width: 21px;
	height: 20px;
	background: url(images/ui_close.png) left top no-repeat;
	cursor: pointer;
	margin-top: 15px;
}
.selectionClose:hover {
	background-position: right top;
}

#selectionSearch {
	position: absolute;
	margin-left: 60px;
}
#selectionSearch input {
	background: #353535;
	color: #e5e5e5;
	font-size: 8pt;
	font-family: tahoma, arial, serif, san-serif;
	padding: 2px;
	border: 1px solid #c5c5c5;
	width: 180px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

.selectionSwirlBL {
	width: 100px;
	height: 118px;
	position: absolute;
	margin-left: -40px;
	margin-top: -80px;
	background: url(images/ui_swirl_bl.png) left top no-repeat;
}
.selectionSwirlBR {
	width: 100px;
	height: 118px;
	position: absolute;
	margin-left: 640px;
	margin-top: -80px;
	background: url(images/ui_swirl_br.png) left top no-repeat;
}

.selectionHeader {
	background: url(images/ui_header.png) left top no-repeat;
	width: 700px;
	height: 50px;
	position: relative;
	margin-top: -9px;
}
.selectionHeader span {
	display: block;
	color: #c5c5c5;
	font-size: 11pt;
	font-family: verdana, tahoma, arial, serif, san-serif;
	position: absolute;
	font-weight: bold;
	margin-left: 230px;
	margin-top: 8px;
	width: 235px;
	text-align: center;
}

/*******************************************************************************
 ****   HEADER
 ******************************************************************************/

#statsFrame {
	float: right;
	width: 200px;
	margin-top: 36px;
}
.statsBlock {
	display: block;
	height: 36px;
	font-size: 10pt;
	color: #d5d5d5;
	text-decoration: none;
	margin: 5px;
	background: url(images/overlay_50.png);
	border: 1px solid #555555;
}
.statsBlock:hover {
	background: url(images/overlay_blue_50.png);
}
.statsBlock span {
	display: block;
	padding-left: 45px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#raceIcon,
#alignmentIcon,
#deityIcon,
#backgroundIcon {
	display: block;
	padding: 0;
	background: url(images/ui_icon_test.png) -2px -2px no-repeat;
	border-right: 1px solid #555555;
	width: 36px;
	height: 36px;
	float: left;
}

#attributesTable {
	float: right;
	text-align: center;
	font-size: 8pt;
	margin: 42px 0 14px 10px;
	width: 200px;
}
#attributesTable thead th {
	background: url(images/overlay_blue_50.png);
	border: 1px solid #555555;
	font-size: 8pt;
	text-align: center;
	padding: 2px 5px;
}
#attributesTable thead th:first-child {
	text-align: left;
}
#attributesTable input {
	padding: 0;
	margin: 0;
	font-size: 8pt;
}
#attributesTable tbody td {
	background: url(images/overlay_50.png);
	padding: 3px;
	height: auto;
	border: 1px solid #555555;
	color: #c5c5c5;
}
#attributesTable tbody td:first-child {
	text-align: left;
	padding: 2px 5px;
	padding-right: 15px;
}
#attributesTable .attrBase {
	background: url(images/overlay_blue_50.png);
}
#attributesTable tfoot td {
	border: 0;
	text-align: center;
	padding: 0;
	border: 1px solid #555555;
}
#attributesTable a {
	margin: 0;
	background: url(images/overlay_blue_50.png);
	color: #c5c5c5;
	font-weight: bold;
}

#backdrop {
	width: 900px;
	height: 450px;
	position: absolute;
	background: url(images/backdrop_lobby.jpg) left top no-repeat;
	bottom: 20%;
	border-left: 1px solid #969e95;
	border-right: 1px solid #969e95;
}

/*******************************************************************************
 ****   REF STYLES
 ******************************************************************************/
.refstring	{margin-bottom: .5em;}
.refstring span	{font-weight: bold;}
.ref_desc	{margin-bottom: 1em;}
.ref_heading {
	font-weight: bold;
	color: #efa837;
	font-size: 10pt;
	margin-bottom: 1.1em;
}
.ref_pclass span {
	font-size: 8pt;
	font-style: italic;
	color: #c5c5c5;
	font-weight: normal;
}

.dropTarget {
	font-weight: bold;
	color: #000000;
}

/*******************************************************************************
 ****   VALIDATION
 ******************************************************************************/
.validation {
	position: absolute;
	width: 16px;
	height: 16px;
	background: url(images/icon_cross.png) left top no-repeat;
}
.validation p {
	margin-bottom: .75em;
}
.validation div {
	display: none;
	width: 200px;
	padding: 8px 4px 4px 8px;
	margin-left: 16px;
	white-space: normal;
	text-align: left;
	font-size: 8pt;
    border: 2px solid #e5e5e5;
    color: #e5e5e5;
    background: #0D121A;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.validation .lower {
    position: absolute;
    bottom: 0;
}
.validation strong {
    color: #efa837;
}
.validation:hover div {
	display: block;
}
.validation div a {
    background: #555555;
	padding: 0;
	margin: 0;
	color: #e5e5e5;
	border: 0;
    
    background: #0D121A;
    color: #e5e5e5;
}
.validation .head {
    font-weight: bold;
    color: #FEE476;
}

.statsBlock .validation {
	margin-left: -55px;
	margin-top: -15px;
	z-index: 10;
}

.classOption .validation {
	margin-top: -14px;
	margin-left: 130px;
}

.classFeat .validation {
	margin-top: -15px;
	margin-left: 181px;
}

/*******************************************************************************
 ****   LOGIN STYLES
 ******************************************************************************/
h2 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 1.3em;
}
fieldset {
	margin: 10px;
	border: 1px solid #353535;
	padding: 15px;
}
legend {
	background: #151515;
	border: 1px solid #353535;
	padding: 3px 10px;
}
.login {
	padding: 20px;
	margin-bottom: 10px;
}
.login div {
	clear: both;
	float: left;
	padding: 4px 0;
	margin-right: 10px;
	width: 315px;
}
.login .notes {
	font-size: 8pt;
	color: #efa837;
	padding-top: 40px;
}
.login input {
	float: right;
	width: 200px;
	padding: 3px;
	border: 1px solid #e5e5e5;
	background: #36445E;
	color: #e5e5e5;
	font-size: 1em;
	margin-left: 10px;
	display: block;
}
.login .button,
#build_info .button {
	float: left;
	clear: left;
	width: 100px;
	height: 23px;
	cursor: pointer;
	padding: 5px 0;
	padding-bottom: 25px;
	background: url(images/ui_button_100.png) left top no-repeat;
	border: 0;
	color: #e5e5e5;
}
.login .button:hover,
#build_info .button:hover {
	background-position: right top;
}

.error_text {
	color: #ff3333;
	font-weight: bold;
}

.noJS {
	line-height: 1.7em;
}

#summary_display {
	display: none;
	position: fixed;
	z-index: 21;
	border: 3px solid #1f2123;
	font-size: 1em;
	overflow: auto;
	height: 700px;
	width: 740px;
	top: 100px;
	padding: 0;
	margin: auto;
	color: #e5e5e5;
	background: url(images/ui_class_1.jpg);
}

#summary_display .link {
	color: #3535c5;
}

.summaryClose {
	float: right;
	width: 21px;
	height: 20px;
	background: url(images/ui_close.png) left top no-repeat;
	cursor: pointer;
	margin-top: 15px;
	margin-right: 15px;
}
.summaryClose:hover {
	background-position: right top;
}

/*******************************************************************************
 ****   SKILL POINT SELECTION
 ******************************************************************************/
.col_base {
	
}
#characterTable .col_skills {
	vertical-align: middle;
	display: none;
}
.skillSelect {
	width: 1%;
}
.skill_count {
	float: left;
	width: 20px;
	cursor: pointer;
	border-left: 10px solid #151515;
	border-right: 10px solid #151515;
	text-align: center;
	padding: 3px 0;
	user-select: none;
    -moz-user-select: none; /* For Firefox */
    -khtml-user-select: none; /* For Safari */
    -o-user-select: none; /* For Opera */
}

.unselectable
{
	user-select: none !important;
    -moz-user-select: none !important; /* For Firefox */
    -khtml-user-select: none !important; /* For Safari */
    -o-user-select: none !important; /* For Opera */	
}

.col_skills .icon > div {
	background: left top no-repeat;
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: relative;
}
.col_skills span {
	font-size: 1.1em;
	padding: 2px;
}
.cross_class {
	font-style: italic;
	border-color: #111111 !important;
}

.draggable .col_skills span {
	font-size: 1em;
	padding-left: 30px;
}

.invalid_skills .col_skills .skill_count {
	background-color: #742425 !important;
	border-color: #742425 !important;
}

.icon_menu {
	width: 16px;
	height: 16px;
	background: url(images/iconDropDown.png) left top no-repeat;
	position: relative;
	left: 12px;
	top: 35px;
}
.icon_menu:hover {
	background-position: right top;
}

#skill_menu {
	display: none;
	width: 260px;
}
#skill_menu span {
	font-weight: bold;
}

#vp_skills {
	width: 16px;
	height: 25px;
	background: url(images/validation_pointer.png) left top no-repeat;
	position: absolute;
	top: -25px;
	left: 40px;
	display: none;
}

#skills_choose {
	float: left;
	margin: 0;
	padding: 0;
	background: url(images/icon_skills_add.png) left top no-repeat;
	color: #e5e5e5;
	text-decoration: none;
	border: 0;
	height: 40px;
	width: 40px;
}
#skill_expand_inner {
	float: left;
	padding-top: 10px;
}

/* Dialog Boxes */
.dialog {
	position: fixed;
	left: 30%;
	top: 30%;
	border: 2px solid #000000;
	background: #0D121A;
	z-index: 21;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.dialog .dialog_inner {
	border: 3px solid #e5e5e5;
	padding: 15px;
	padding-bottom: 20px;
	font-size: 10pt;
	color: #e5e5e5;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
.dialog .buttons {
	float: right;
}
.dialog .buttons a {
	float: left;
	background: #181D25;
	color: #e5e5e5;
	border: 1px solid #000000;
	padding: 5px 15px;
	text-decoration: none;
	outline: none;
	margin-left: 10px;
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
.dialog .buttons.center {
	float: none;
}
.dialog .buttons.center a {
	float: none;
	display: block;
	margin: auto;
	width: 50px;
	text-align: center;
}
.dialog .buttons a:hover,
.dialog .buttons a:focus {
	background: #2B3F50;
	border: 1px solid #e5e5e5;
}

/* Custom Build Options Dialog */

.dialog .heading {
	font-weight: bold;
	font-size: 1.1em;
	border-bottom: 1px solid #a5a5a5;
	color: #596B85;
	margin-bottom: 10px;
}

.dialog .group {
	width: 300px;
	margin-bottom: 10px;
}
.dialog .group .desc {
	clear: left;
	font-size: .9em;
	padding: 5px;
}
.dialog .group .title {
	font-weight: bold;
	line-height: 1.7em;
}
.dialog .group .value {
	float: right;
}
.dialog .group .value .medium {
	width: 150px;
	background: #36445E;
	border: 1px solid #e5e5e5;
	color: #e5e5e5;
	padding: 2px;
}
.dialog .group .value select.medium {
	width: 156px;
}
.dialog .note {
	font-size: .85em;
	padding: 3px;
	color: #c5c5c5;
}

#sort_skills {
	float: right;
	border: 1px solid #596B85;
	padding: 4px 15px;
	margin-right: 10px;
	margin-top: 3px;
	font-size: 1.2em;
	background: #141C29;
	cursor: pointer;
}
#sort_skills:hover {
	background: #596B85;
}

/*******************************************************************************
 ****   BUILD RESTORE
 ******************************************************************************/
.hover_label {
    display: none;
    position: absolute;
    top: -35px;
    left: -5px;
    border: 2px solid #000000;
    background: #0D121A;
    z-index: 21;
    white-space: nowrap;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.hover_label .inner {
    border: 2px solid #e5e5e5;
    padding: 5px 10px;
    font-size: 8pt;
    color: #e5e5e5;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#button_undo:hover .hover_label {display: block;}
#button_redo:hover .hover_label {display: block;}