/* COLOR SET
light font-color:         #93887F
default font-color:       #69594B
headline font-color:      #42382F
hover font-color:         #360
disabled font-color:      #999
code font-color:          #960
*/

.FloatLeft   { float: left; }
.FloatRight  { float: right !important; }
.AlignLeft   { text-align: left; }
.AlignCenter { text-align: center; }
.AlignRight  { text-align: right; }

.List { color: #69594b; list-style: disc inside; margin-top: 10px; }

/* IE6 PNG 8-bit alpha support
---------------------------------------------------------------- */
/*This classes do NOT work correctly, if background-image is set to be "!important"!*/

.IE6PNGBGSCALE { /* background-image will be scaled to element dimensions in IE6 */
  behavior:expression(
    this.pngSet ? this.pngSet = true : (
      this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='scale')",
      this.runtimeStyle.backgroundImage = "none",
      this.pngSet=true
    )
  );
}
.IE6PNGBGCROP { /* background-image will be croped on element dimensions in IE6 */
  behavior:expression(
    this.pngSet ? this.pngSet = true : (
      this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')",
      this.runtimeStyle.backgroundImage = "none",
      this.pngSet=true
    )
  );
}
.IE6PNGBGSCALE[class~=IE6PNGBGSCALE], .IE6PNGBGCROP[class~=IE6PNGBGCROP] {
  behavior:none;
}


/*  Elements
---------------------------------------------------------------- */

body { background: #FDFDFD URL(Background.png) repeat-x; }

table { font-size: 11px; color: #69594B; line-height: 20px;}
table .Odd { background: #F5F5F5; }
th { text-align: left; padding-top: 10px; padding-bottom: 10px; }
tr, th, td { border-bottom: 1px solid #EEE; }

/*  Text Links
---------------------------------------------------------------- */

a.Link,
a.Link:Visited { color:#82B725; }
a.Link:Hover,
a.Link:Focus,
a.LinkActive { color:#82B725; text-decoration:underline; border-bottom:1px solid #DBFF9C; }
a.LinkDisabled { color:#999; text-decoration:underline; }
/* Temp classes until text csv vars have proper classnames */
a.TextLink,
a.TextLink:Visited { color:#82B725; }
a.TextLink:Hover,
a.TextLink:Focus,
a.TextLinkActive { color:#82B725; text-decoration:underline; border-bottom:1px solid #DBFF9C; }
a.TextLinkDisabled { color:#999; text-decoration:underline; }


/*  Button setup ( <A>, <BUTTON> )
    based on "sliding door", "css sprite" & "ButtonWrapper" principles
---------------------------------------------------------------- */

.ButtonWrapper { overflow:hidden;	width:100%; }
a.Button,
a.Button span,
a.Button button { background-image:URL(ButtonSprite.png); color:#69594B; float:left; display:block; cursor:pointer; background-color:transparent; background-repeat:no-repeat; }
a.Button { padding-left: 14px; background-position: left top; float: left; line-height: 28px; }
a.Button span,
a.Button button { height: 30px; padding: 0 14px 0 0; line-height: 28px; background-position: right top; text-align: center; width: auto; border: none; }
a.Button button { width:auto; padding-bottom: 4px; overflow:visible; }
html>body a.Button span { float:none; }
a.Button:Hover,
a.Button:Focus,
a.ButtonActive { background-position: left -30px; }
a.Button:Hover span,
a.Button:Focus span,
a.ButtonActive span,
a.Button:Hover button,
a.Button:Focus button,
a.Button button:Hover,
a.Button button:Focus { background-position: right -30px; color: #360; }
a.ButtonDisabled,
a.ButtonDisabled:Hover,
a.ButtonDisabled:Focus { background-position: left -60px; cursor: default; }
a.ButtonDisabled span,
a.ButtonDisabled:Hover span,
a.ButtonDisabled:Focus span { background-position: right -60px; color: #999; cursor: default; }

#AdminButtons .Button, #AdminButtons .Button span { height: 18px !important; line-height: 20px !important; }

/*  Tabs
---------------------------------------------------------------- */

.TabWrapper { overflow:hidden; width:100%; background-image:URL(TabWrapperBackground.png); background-repeat:repeat-x; background-position:top; }
.TabWrapper a.Tab,
.TabWrapper a.Tab span { font-size:12px; background-image:URL(TabSprite.png); color:#69594B; float:left; display:block; cursor:pointer; background-color:transparent; background-repeat:no-repeat; }
.TabWrapper a.Tab { padding-left: 14px; background-position:left top; float:left; line-height: 28px; height: 28px; }
.TabWrapper a.Tab span { height: 30px; padding: 0 14px 0 0; line-height: 28px; background-position: right top; text-align: center; width: auto; border: none; }
.TabWrapper a.Tab:Focus,
.TabWrapper a.Tab:Hover,
.TabWrapper a.TabActive { background-position: left -30px; }
.TabWrapper a.Tab:Focus span,
.TabWrapper a.Tab:Hover span,
.TabWrapper a.TabActive span { background-position: right -30px; color: #360; }
.TabWrapper a.TabDisabled,
.TabWrapper a.TabDisabled:Hover,
.TabWrapper a.TabDisabled:Focus { background-position: left -60px; cursor: default; }
.TabWrapper a.TabDisabled span,
.TabWrapper a.TabDisabled:Hover span,
.TabWrapper a.TabDisabled:Focus span { background-position: right -60px; color: #999; cursor: default; }
.TabContentWrapper { overflow:hidden; width:100%; background-image:URL(TabContentWrapperBackground.png); background-repeat:repeat-x; background-color:#f5f5f5; }
.TabContentWrapper .TabContent { float:left; display:none; overflow:auto; height:120px; padding:10px; border-left:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #CCC; }
.TabContentWrapper .TabContentDisabled { }
.TabContentWrapper .TabContentActive { display:block; }


.PageButton  { height:100px; width:40px; display:block; background-image:URL(PageButtonSprite.png); margin-top: 110px;}
.PageButtonLeft { background-position:left; }
.PageButtonRight { background-position:right; }


/*  List Menu ( uses .button class styles)
---------------------------------------------------------------- */

.ListMenuWrapper { padding-bottom: 40px; background: URL(ListMenuBackground.png) no-repeat bottom left; }
.ListMenuContent { width: 160px; overflow: hidden; padding-top: 4px; background: URL(ListMenuBackground.png) no-repeat top left; }
.ListMenuContent li { float: left; display: block; }
.ListMenuContent a.MenuItem { width: 146px; }
.ListMenuContent a.MenuItem,
.ListMenuContent a.MenuItem span { font-size: 12px; background-image: URL(ListMenuItemSprite.png); text-align: left; }
.ListMenuContent a.MenuItem:Hover,
.ListMenuContent a.MenuItem:Focus,
.ListMenuContent a.MenuItemActive { background-position: left -30px;}
.ListMenuContent a.MenuItem:Hover span,
.ListMenuContent a.MenuItem:Focus span,
.ListMenuContent a.MenuItemActive span { color: #FFF; background-position: right -30px;}
.ListMenuContent a.MenuItemDisabled,
.ListMenuContent a.MenuItemDisabled:Hover,
.ListMenuContent a.MenuItemDisabled:Focus { background-position: left -60px; cursor: default; }
.ListMenuContent a.MenuItemDisabled span,
.ListMenuContent a.MenuItemDisabled:Hover span,
.ListMenuContent a.MenuItemDisabled:Focus span { background-position: right -60px; cursor: default; color: #999; }
.ListMenuContent a.MenuItem img { margin-left: -6px; margin-bottom: -3px; padding-right: 4px; }


/*  Pagination
---------------------------------------------------------------- */

.PaginationWrapper { width: 100%; overflow: hidden; }
.Pagination { font-size:11px; color:#69594b; overflow:hidden; width:auto; float:left; }
.Pagination div { float:left; padding:2px;}
.Pagination .PaginationPageXofY { line-height:21px; color:#93887F; }
.Pagination a,
.Pagination span { height:16px; padding:0 4px; line-height:15px; color:#69594b; float:left; display:block; margin:1px; text-align:center; }
.Pagination a:Link,
.Pagination a:Visited { border:1px solid #EEE; cursor:pointer; }
.Pagination a:Hover,
.Pagination a:Active,
.Pagination a:Focus  { border:1px solid #69594b; cursor:pointer; background:#42382F; color:#FFF; text-decoration:none; }
.Pagination .EmptyPage,
.Pagination .EmptyPage:Link,
.Pagination .EmptyPage:Hover,
.Pagination .EmptyPage:Active,
.Pagination .EmptyPage:Visited,
.Pagination .EmptyPage:Focus { border:1px solid #EEE; color:#999; background:transparent;}
.Pagination a.Active { color:#FFF; background:#82B725; }


/*  Forms & Inputs
---------------------------------------------------------------- */

.InputForm { border: 1px solid #CCC; }
.InputForm div { overflow: hidden; margin-bottom: 5px; }
.InputForm .Input { }
.InputForm .InputLabel { font-size: 11px; }
.InputForm .Checkbox { }
.InputForm .CheckboxLabel { color: #69594B; font-size: 11px; line-height: 1.6em; }
.TopLabels { padding: 40px; }
.TopLabels .Input,
.TopLabels .InputLabel { display: block; width: 96%; margin-bottom: 5px; }
textarea,
.Input { font-size: 12px; text-indent: 0px; padding: 5px; color: #444; border: 1px solid #DDD; border-top: 1px solid #CCC; border-left: 1px solid #CCC; background-color: #FFF; background-image: URL(InputSprite.png); background-repeat: repeat-x; background-position: 1px 1px; }
textarea:Focus,
.Input:Focus { color: #222; border: 1px solid #CCC; border-top: 1px solid #AAA;   border-left: 1px solid #AAA; background-position: 30px 1px; }
select,
option,
label { font-size: 11px; color: #42382f; }
select { padding: 0px 0px 0px 0px; }
select option:hover { background-color:#DDD; }
select option:activ { background-color:#87d300; }


/*  AIOA (Atach Icon On Avatar)
---------------------------------------------------------------- */

.AIOAItemSelection { }
.AIOAItemSelection .Section { clear:both; }
.AIOAItemSelection .Label { }
.AIOAItemSelection .AIOAListItem { cursor:pointer; float:left; position:relative; z-index:40; margin-right:2px; padding:2px; border:1px solid #FFF; }
.AIOAItemSelection .AIOAListItem:hover { z-index:60; border:1px solid #CCC; background-color:#FFF; }
.AIOAItemSelection .AIOAListItemSelected, .AIOAItemSelection .AIOAListItemSelected:hover { z-index:50; border:1px solid #CCC; background-color:#CCC; }
.AIOAItemSelection .AIOAListItem .AIOAIcon { cursor:pointer; display:block; width:24px; height:24px; }
.AIOAItemSelection .AIOAListItemSelected .AIOAIcon { }
.AIOAItemSelection #AIOAListItem0 { border:0px none; padding:2px; border:1px solid #FFF; background-color:transparent; }
.AIOAItemSelection #AIOAListItem0:hover { border:1px solid #CCC; }
.AIOAFlag { line-height:30px; margin-right:5px; }


/*  Points
---------------------------------------------------------------- */

.PointsWrapper { width: auto; overflow:hidden; }
.Points span { float:left; display:block; width:8px; height:8px; margin-right:1px; background-repeat:no-repeat; }
.Points .Points_Grade01 { background-image:URL(grades/grade0_1.png);}
.Points .Points_Grade02 { background-image:URL(grades/grade0_2.png); }
.Points .Points_Grade03 { background-image:URL(grades/grade0_3.png); }
.Points .Points_Grade1  { background-image:URL(grades/grade1.png); }
.Points .Points_Grade11 { background-image:URL(grades/grade1_1.png); }
.Points .Points_Grade12 { background-image:URL(grades/grade1_2.png); }
.Points .Points_Grade13 { background-image:URL(grades/grade1_3.png); }
.Points .Points_Grade2  { background-image:URL(grades/grade2.png); }
.Points .Points_Grade21 { background-image:URL(grades/grade2_1.png); }
.Points .Points_Grade22 { background-image:URL(grades/grade2_2.png); }
.Points .Points_Grade23 { background-image:URL(grades/grade2_3.png); }
.Points .Points_Grade3  { background-image:URL(grades/grade3.png);}
.Points .Points_Grade31 { background-image:URL(grades/grade3_1.png); }
.Points .Points_Grade32 { background-image:URL(grades/grade3_2.png); }
.Points .Points_Grade33 { background-image:URL(grades/grade3_3.png); }
.Points .Points_Grade4  { background-image:URL(grades/grade4.png);}
.Points .Points_Grade41 { background-image:URL(grades/grade4_1.png); }
.Points .Points_Grade42 { background-image:URL(grades/grade4_2.png); }
.Points .Points_Grade43 { background-image:URL(grades/grade4_3.png); }
.Points .Points_Grade5  { background-image:URL(grades/grade5.png);}
.Points .Points_Grade51 { background-image:URL(grades/grade5_1.png); }
.Points .Points_Grade52 { background-image:URL(grades/grade5_2.png); }
.Points .Points_Grade53 { background-image:URL(grades/grade5_3.png); }
.Points .Points_Grade6  { background-image:URL(grades/grade6.png);}
.Points .Points_Grade61 { background-image:URL(grades/grade6_1.png); }
.Points .Points_Grade62 { background-image:URL(grades/grade6_2.png); }
.Points .Points_Grade63 { background-image:URL(grades/grade6_3.png); }
.Points .Points_Grade7  { background-image:URL(grades/grade7.png);}
.Points .Points_Grade8  { background-image:URL(grades/grade8.png);}

/*  Fluid Dialog
---------------------------------------------------------------- */

.FluidDialog .FDDesign { display:none; }
.FluidDialog .FDDesign, .FluidDialog .FDIcon {
  behavior:expression(
    this.pngSet ? this.pngSet = true : (
      this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='scale')",
      this.runtimeStyle.backgroundImage = "none",
      this.pngSet=true
    )
  );
}
.FluidDialog .FDDesign[class~=FDDesign], .FluidDialog .FDIcon[class~=FDIcon] { behavior:none; }
.FluidDialog { display:none; position:absolute; top:15px; left:15px; z-index:90; }
.FluidDialog[class~=FluidDialog] { position:fixed; }
/* Corner left top */
.FluidDialog .FDDesign1 { background:url(FluidDialog/FluidDialog1.png); display:block; position:absolute; left:0px; top:0px; overflow:hidden; width:10px; height:10px; }
/* Top to bottom filler */
.FluidDialog .FDDesign2 { background:url(FluidDialog/FluidDialog2.png); display:block; position:absolute; left:0px; top:0px; margin-top:0px; margin-left:10px; overflow:hidden; width:expression(this.parentNode.offsetWidth - 20); height:expression(this.parentNode.offsetHeight); }
/* Corner right top */
.FluidDialog .FDDesign3 { background:url(FluidDialog/FluidDialog3.png); display:block; position:absolute; right:0px; top:0px; overflow:hidden; width:10px; height:10px; }
/* Left filler */
.FluidDialog .FDDesign4 { background:url(FluidDialog/FluidDialog4.png); display:block; position:absolute; left:0px; top:0px; margin-top:10px; overflow:hidden; width:10px; height:expression(this.parentNode.offsetHeight - 20); }
/* Filler right */
.FluidDialog .FDDesign5 { background:url(FluidDialog/FluidDialog5.png); display:block; position:absolute; right:0px; top:0px; margin-top:10px; overflow:hidden; width:10px; height:expression(this.parentNode.offsetHeight - 20); }
/* Corner left bottom */
.FluidDialog .FDDesign6 { background:url(FluidDialog/FluidDialog6.png); display:block; position:absolute; left:0px; top:expression(this.parentNode.offsetHeight - 10); overflow:hidden; width:10px; height:10px; }
/* Corner right bottom */
.FluidDialog .FDDesign7 { background:url(FluidDialog/FluidDialog7.png); display:block; position:absolute; top:expression(this.parentNode.offsetHeight - 10); right:0px; overflow:hidden; width:10px; height:10px; }
/* Corner left bottom + gradient to the right */
.FluidDialog .FDDesign8 { background:url(FluidDialog/FluidDialog8.png); display:block; position:absolute; left:0px; bottom:0px; overflow:hidden; width:149px; height:10px; }
/* Filler bottom */
.FluidDialog .FDDesign9 { background:url(FluidDialog/FluidDialog9.png); display:block; position:absolute; left:0px; bottom:0px; margin-left:149px; overflow:hidden; width:expression(this.parentNode.offsetWidth - 159); height:10px; }
/* Corner right bottom */
.FluidDialog .FDDesign10 { background:url(FluidDialog/FluidDialog10.png); display:block; position:absolute; right:0px; bottom:0px; overflow:hidden; width:10px; height:10px; }
/* Seperator between buttons and message - left gradient */
.FluidDialog .FDDesign11 { background:url(FluidDialog/FluidDialog2.png); display:block; position:absolute; left:10px; bottom:10px; overflow:hidden; width:194px; height:55px; }
/* Seperator between buttons and message - right filler */
.FluidDialog .FDDesign12 { background:url(FluidDialog/FluidDialog2.png); display:block; position:absolute; left:0px; bottom:10px; margin-left:204px; overflow:hidden; width:expression(this.parentNode.offsetWidth - 214); height:55px; }

.FluidDialog .FDDesign2[class~=FDDesign2] { right:0px; bottom:0px; margin-right:10px; margin-bottom:10px; width:auto; height:auto; }
.FluidDialog .FDDesign4[class~=FDDesign4] { bottom:0px; margin-bottom:10px; height:auto; }
.FluidDialog .FDDesign5[class~=FDDesign5] { bottom:0px; margin-bottom:10px; height:auto; }
.FluidDialog .FDDesign6[class~=FDDesign6] { top:auto; bottom:0px; }
.FluidDialog .FDDesign7[class~=FDDesign7] { top:auto; bottom:0px; }
.FluidDialog .FDDesign9[class~=FDDesign9] { right:0px; margin-right:10px; margin-left:10px; width:auto; }
.FluidDialog .FDDesign12[class~=FDDesign12] { right:0px; margin-right:10px; width:auto; }

.FluidDialog tr { border: none; }

.FluidDialog .FDContentWrapper { position:relative; margin:10px 15px 15px 10px; }
.FluidDialog .FDCaptionWrapper { }
.FluidDialog .FDCaption { color:#42382F; font-size:16px; padding:5px; }
.FluidDialog .FDMessageWrapper { position:relative; cell-spacing:0px; border-collapse:collapse; }
.FluidDialog .FDMessageTd { vertical-align:middle; }
.FluidDialog .FDMessage { color:#69594B; padding:5px 5px 20px 5px; width:280px; }
.FluidDialog .FDMessageTd .FDNoIcon { }
.FluidDialog .FDIconTd { }
.FluidDialog #FluidDialogIcon1 { display:none; }
.FluidDialog .FDIcon { display:none; }

.FluidDialog .FDButtonsWrapper {
  margin-top:5px;
}
.FluidDialog .FDButtonsWrapper .FDButtons {
  margin:0px;
  padding:0px;
  text-align:right;
}
.FluidDialog .FDButtonsWrapper .FDButtons .divButtonRight {
  display:inline;
  float:none;
  margin:0px;
  padding:0px;
  overflow:auto;
  width:auto;
  height:auto;
}
.FluidDialog .FDButtonsWrapper .FDButtons .divButtonRight a.Button {
  display:inline;
  float:none;
  margin:0px 0px 0px 5px;
  padding:8px 0px 8px 14px;
  overflow:auto;
  width:auto;
  height:auto;
  behavior:expression(this.bIEFixed ? this.bIEFixed = true : (
    this.runtimeStyle.paddingTop    = "0px", /* No top padding for IE */
    this.runtimeStyle.paddingBottom = "0px", /* No bottom padding for IE */
    this.bIEFixed=true
  ));
}
.FluidDialog .FDButtonsWrapper .FDButtons .divButtonRight a.Button span {
  display:inline;
  float:none;
  margin:0px;
  padding:8px 14px 8px 0px;
  overflow:auto;
  width:auto;
  height:auto;
}

.FluidDialogModalityLayer { background:#000; position:absolute; z-index:80; left:0px; top:expression(documentElement.scrollTop - this.offsetHeight + this.offsetHeight); filter:alpha(opacity=50); width:100%; height:expression(documentElement.clientHeight); }
.FluidDialogModalityLayer[class~=FluidDialogModalityLayer] { position:fixed; top:0px; -moz-opacity:0.5; opacity:0.5; height:100%; }


/*  Infotainer -> info boxes for Help, Alert, Error, Info
---------------------------------------------------------------- */

.Infotainer { padding: 10px; margin-bottom: 20px; text-indent: 20px; font-size: 11px; line-height: 1.4em; color: #888; cursor: default; }
.Infotainer a { text-decoration: underline; white-space: nowrap; }
.Infotainer strong { }
.InfotainerDescription { color: #42382f; }


/*  Error
---------------------------------------------------------------- */

.ErrorMessage { border: 1px solid #F8E794; color: #960; background: #FEF9CD; background-image: url(ErrorMessage.png); background-position:  8px 8px; background-repeat: no-repeat; }
.ErrorMessage a,
.ErrorMessage strong { color: #D5A13D; }


/*  Info
---------------------------------------------------------------- */

.InfoMessage { background-color:#EDF3FF; background-image: url(InfoMessage.png); background-position:  8px 8px; background-repeat: no-repeat; border: 1px solid #DFEAf7; color:#6C9AC7; }
.InfoMessage a,
.InfoMessage strong { color: #6C9AC7; }


/*  Inventory Slots & Items
---------------------------------------------------------------- */

.InventoryWrapper { width:auto; overflow:hidden; background:#EEE; }
.InventoryItem { float:left; display:inline; width:40px; height:40px; background-image:URL(InventorySlotSprite.png); cursor:pointer; }
.InventoryItem:Hover,
.InventoryItem:Active,
.InventoryItemActive:Hover,
.InventoryItemActive:Active,
.InventoryItemActive   { background-position:left -40px; }
.InventoryItemDisabled,
.InventoryItemDisabled:Hover,
.InventoryItemDisabled:Active { background-position:left -80px; cursor:default; }
.InventoryItemImage { width:40px; height:40px; background-position:center; background-repeat:no-repeat; }
.InventoryItemActive .InventoryItemImage,
.InventoryItemImage:Hover,
.InventoryItemActive:Hover .InventoryItemImage,
.InventoryItemActive:Active .InventoryItemImage { width:39px; height:39px; }
.InventoryItemDisabled .InventoryItemImage { width:40px; height:40px; }