/* static: buttons.css */
.largeButtons:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

* {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
:focus {
  outline:none;
}
.largeButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.largeButtons li {
  border: 1px;
  margin: 0 0 0 5px;
  float: right;
}

.largeButtons a,
.largeButtons li a,
.pmEditFolders a{
  text-decoration: none;
  white-space: nowrap;
  border:1px solid #968082;
  padding: 5px 10px;
  display: block;
  background: #a480b5;
  background: -moz-linear-gradient(top,  #a480b5 0%, #1a1328 100%);
  background: -webkit-linear-gradient(top,  #a480b5 0%,#1a1328 100%);
  background: linear-gradient(to bottom,  #a480b5 0%,#1a1328 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a480b5', endColorstr='#1a1328',GradientType=0 );
  border-radius:5px;
  color: #fff;
  text-transform:uppercase;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity:0.7;
}
.largeButtons a img,
.largeButtons li a img,
.pmEditFolders a img{
  display:none;
}
.largeButtons a:hover,
.largeButtons a:focus,
.largeButtons a:active,
.largeButtons li a:hover,
.largeButtons li a:focus,
.largeButtons li a:active,
.pmEditFolders a:hover,
.pmEditFolders a:focus,
.pmEditFolders a:active{
  opacity:1;
}

.largeButtons span {
  font-weight: normal;
}

.smallButtons:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.smallButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smallButtons li {
  border: 1px;
  margin: 10px 0 0 4px;
  float: right;
}

.smallButtons .pageMenu li {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
}

.smallButtons a {
  text-decoration: none;
  line-height: 1.3;
  border:none;
  padding: 0 2px;
  display: block;
  white-space: nowrap;
}
.smallButtons a:hover span,
.smallButtons a:focus span,
.smallButtons a:active span{
  color:#fff;
}
.smallButtons .pageMenu a {
  border: 0;
}

.smallButtons span {
  font-weight: normal;
  padding-left: 1px;
}

.smallButtons img {
  margin-top: -1px;
}

.smallButtons > ul > li > a {
  min-height: 18px !important;
}

.optionButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.optionButtons li {
  margin-top: .3em;
  margin-right: 2px;
  float: left;
}

.optionButtons .pageMenu li {
  border: 0;
}

.optionButtons a {
  text-decoration: none;
  line-height: 1.3;
  padding: 0 4px 0 4px;
  display: block;
}
.optionButtons a:hover span,
.optionButtons a:focus span,
.optionButtons a:active span,
.optionButtons .pageMenu a:hover,
.optionButtons .pageMenu a:focus,
.optionButtons .pageMenu a:active{
  color:#99c5ff;
}
.optionButtons .pageMenu a {
  border: 0;
  color:#5c7595;
}
.optionButtons > ul > li > a {
  min-height: 18px !important;
}

.buttonBar {
  border-width: 1px 0 0 0;
  margin-top: 5px;
  display: block;
  clear: both;
  border-color:#202138;
}

.buttonBar p {
  margin-top: 7px;
}

.buttonBar .extraButton {
  margin-left: 10px;
}

.buttonBar .buttonBarCaption {
  float: left;
}

/* static: containers.css */
.border {
  border: 1px solid #202138;
  margin-bottom: 7px;
  padding: 1px 0 0 1px;
}

.category.border,
.border.infoBox,
.border.titleBarPanel,
.border.content,
#mce_editor_0_tabContent,
.quickReply .messageInner,
.board.border{
  border: none;
}
#tplBoard .border.borderMarginRemove,
.tabMenuContent .contentBox .border,
#tplMembersList .tabMenuContent,
.pmMessages .border{
  border-width:1px 0 0 1px;
}
.borderMarginRemove {
  margin-top: -8px;
}


.content > div {
  padding: 7px 25px;
}

.contentStyler p {
  margin: 5px 0;
}

.boardlistInner {

  margin:5px 0;
}
.board-Title {
  font-size:13px;
  line-height:30px;
  letter-spacing: 0.5px;
}

#boardlist li ul .boardlistTitle .containerIcon {
  margin:0px 10px 0 0!important;
}





.boardlistStats {
  background: #12161b;
  min-height:22px;
  border:1px solid #202138;
  border-radius:10px;
  text-align:center;
  padding:10px 5px;
  font-size:12px;
  color:#5c7595;
}
.boardlistStats span {
  color:#99c5ff
}

.infoBox .container-1, .infoBox .container-2 {
  padding: 4px;
  clear: both;
}

.infoBox h3 {
  margin: 0 !important;
  font-weight: bold;
}

.containerIconSmall {
  text-align: center;
  float: left;
  width: 30px;
}

.containerIcon {
  text-align: center;
  float: left;
}
.containerIcon.op {

  width: 30px;
  opacity:0.4;

}

.containerHead .containerIcon {
  position:absolute;
  right:40px;
  top:13px;
}
.containerIcon.op:hover {
  opacity:1;
}

.containerIconLarge {
  text-align: center;
  float: left;
  width: 50px;
}

.containerContentLarge {
  margin-left: 60px;
}
.containerContent .firstLine{
  font-size:13px;
  color:#99c5ff;
  margin-bottom:15px;
}
.mainHeadline {
  margin: 3px 0 7px 0;
  padding: 0;
  clear: both;
  display: block;
  min-height: 50px;
  width: 100%;
}

.mainHeadline img {
  float: left;
}

.mainHeadline .headlineContainer img {
  float: none;
}

.mainHeadline .headlineContainer {
  margin: 7px 0 7px 74px;
  min-height: 68px;
}

.mainHeadline .headlineContainer h2,
.mainHeadline .headlineContainer h2 a {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color:#99c5ff;
  text-decoration: none;
}

.mainHeadline .headlineContainer p {
  margin: 0;
  padding: 0;
  color:#5c7595;
}

.subHeadline {
  font-size: 1.5em;
  font-weight: normal;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-top-width: 0 !important;
  margin-top: 7px;
  margin-bottom: 10px !important;
  padding-bottom: 7px;
  border-color:#202138;
}

.subHeadline a {
  text-decoration: none;
}

.subHeadline span {
  font-size: 75%;
}

.subHeadline .inputText {
  width: 95%;
}

fieldset {
  border: 1px solid #202138;
  margin: 10px 0;
  min-width:1px;
}

fieldset:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

fieldset legend {
  margin: 0 0 0 -5px;
  padding: 0 5px;
}

fieldset fieldset {
  margin-bottom: 5px;
}

/* static: footer.css */
#footer {
  border-width: 1px 0 0 0;
  border-style: solid;
  padding: 10px 0;
}

.footerMenu {
  margin-bottom: 10px;
  float: left;
}

.footerMenu ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}

.footerMenu li {
  white-space: nowrap;
  border-width: 0 0 0 1px;
  border-style: solid;
  margin-top: 5px;
  padding: 0 10px;
  display: inline-block;
}

.footerMenu li.first, .footerMenu li.firstActive {
  border-width: 0;
  padding-left: 0;
}

.footerMenu a {
  text-decoration: none;
  display: block;
}

.footerMenu span {
  padding: 3px 0 2px 0;
}

.footerMenu a:hover span {
  text-decoration: none;
}

.footerMenu div.popupMenu {
  font-size: 1em;
}

.footerOptions {
  margin-bottom: 10px;
  float: right;
}

.footerOptions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footerOptionsInner > ul > li {
  display: inline-block;
}

.footerOptions li {
  border-width: 0 1px 0 0;
  border-style: solid;
  margin-top: 5px;
  padding: 0;
}

.footerOptions li.last {
  border-width: 0;
}

.footerOptions a, .footerOptions em {
  font-style: normal;
  text-decoration: none;
  display: block;
}

.footerOptionsInner > ul > li > a {
  min-height: 16px;
}

.footerOptions span {
  padding: 3px 0 2px 0;
}

.footerOptions a span {
  text-decoration: underline;
}

.footerOptions a:hover span {
  text-decoration: none;
}

.footerOptions div.popupMenu {
  font-size: 1em;
}

.footerOptions li.extraButton {
  border-width: 1px;
  margin-top: 0 !important;
  padding: 0;
}

.footerOptions li.extraButton a {
  margin: 0;
  padding: 1px 2px 0 2px;
}

.copyright {
  text-align: center;
  white-space: nowrap;
  padding: 10px 0 7px 0;
  clear: both;
}

.copyright a {
  text-decoration: none;
}

/* static: forms.css */
form {
  margin: 0;
  padding: 0;
}

textarea, input, select {
  font-size: .95em;
}

input[type="submit"], input[type="reset"], input[type="button"], input[type="file"] {
  font-size: 1em;
}

.formSubmit {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

textarea, .inputText {
  border-width: 1px;
  width: 99.5%;
}

select {
  border-width: 1px;
  padding: 2px;
}

input[type="text"], input[type="password"] {
  padding: 3px 0 3px 2px;
}

input[type="file"] {
  padding: 2px 3px;
}

select[multiple="multiple"] {
  padding: 0 !important;
}

textarea {
  padding-left: 3px;
}

input[type="radio"] {
  margin-left: 0;
}

select[multiple="multiple"] {
  width: 100%;
}

input[type="image"] {
  margin: 0 3px -3px 0;
}

.searchInput > input[type="image"] {
  margin: 0;
}

.fourDigitInput {
  width: 40px !important;
}

.textareaSmall {
  height: 1.9em;
  line-height: 2;
}

.formElement {
  margin: 5px 0 3px 0;
  min-height: 0;
}

.formElement:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.formField {
  padding: 0;
}

.formElement .formField {
  margin-left: 216px;
}

fieldset .formElement .formField {
  margin-left: 202px;
}

.formField input, .formField select, .formField textarea {
  margin: 2px 0;
}

.formField label {
  font-size: 1em !important;
  display: block;
}

.containerContent .formField {
  margin-top: -5px;
}

.formFieldLabel {
  text-align: right;
  float: left;
  width: 200px;
}

fieldset .formFieldLabel {
  width: 187px;
}

.formFieldDesc {
  padding: 0 0 2px 0;
}

.formElement .formFieldDesc {
  margin-left: 216px;
}

fieldset .formElement .formFieldDesc {
  margin-left: 202px;
}

.formCheckBox .formFieldDesc {
  padding: 0 0 2px 18px;
}

.formFieldDesc code {
  font-size: 1.3em;
}

.formFieldDesc > p {
  clear: both;
}

.formGroup {
  min-height: 0;
  margin: 5px 0 3px 0;
}

.formGroup .formGroupLabel {
  text-align: right;
  float: left;
  width: 200px;
}

fieldset .formGroup .formGroupLabel {
  width: 187px;
}

.formGroup .formGroupField {
  margin-left: 216px;
}

fieldset .formGroup .formGroupField {
  margin-left: 203px;
}

.formGroup .formGroupField legend {
  display: none;
}

.formGroup .formGroupField .formElement input {
  width: auto !important;
}

.formPrefix select {
  float: left;
  width: 150px;
}

.formPrefix div {
  margin-left: 155px;
}

.formPrefix {
  min-height: 0;
}

.formOptions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.formOptions li {
  margin-top: 3px;
  padding-right: 2%;
  float: left;
}

.formOptions li span {
  float: none;
  padding-left: 12px;
}

.formOptionsLong {
  list-style: none;
  margin: 0 0 7px 0;
  padding: 0;
}

.formOptionsLong li {
  margin: 3px 0 0 0;
  padding: 0;
}

.formOptionsLong span, .formOptionsLong label {
  display: inline;
}

.formError, .formError a {
  color: #c00;
}

.formError .inputText, .formError textarea, .formError select {
  border-color: #c00;
  background-color: #fee;
}

.formError .mceToolbar select {
  border-color: transparent !important;
}

.longSelect select {
  width: 100%;
}

/* static: global.css */
* {
  text-overflow: ellipsis;
}

body, html {
  margin: 0 !important;
  padding: 0 !important;

    cursor: url(/resources/images/coursor.png), url(/resources/images/coursor.png), pointer;
}

#main:after {
  clear: both;
  display: block;
  height: 0;
  content: "";
}

p {
  margin: 0;
  padding: 0;
}

pre {
  font-family: "Courier New", Courier, monospace !important;
}

img {
  vertical-align: middle;
  border: 0;
}

a {
  text-decoration: none;
  color:#99c5ff;
}
a:hover {
  text-decoration: underline;
  color:#fff;
}
.hidden {
  height: 0;
  overflow: hidden;
  position: absolute;
  left: -9000px;
  max-width: 8000px;
}

.new {
  font-weight: bold;
}

.buddy {
  font-size: 1.2em;
}

.dragable * {
  cursor: move;
}

.loading {
  background-color: #fff;
  background-image: url("../images/spinner.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  min-height: 80px;
  opacity: .5;
}

.rating {
  float: right;
}

h1 {
  margin: 0;
  padding: 0 0 15px 0;
}

h1 a {
  text-decoration: none;
}

h2, h2 a {
  text-decoration: none;
}

h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  margin: 0;
  padding: 0;
}

#main > h2 {
  padding-bottom: 7px;
}

.pointer {
  cursor: pointer;
}

a {
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

.externalURL {
  background-image: url("../icon/externalURL.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 15px;
}

.externalURL:hover {
  background-image: url("../icon/externalURLHover.png");
  background-position: right center;
  background-repeat: no-repeat;
}

.quickJump {
  white-space: nowrap;
  width: auto;
}

.quickJump select {
  width: auto;
  max-width: 50%;
}

.pageOptions {
  float: right;
}

.pageOptions form, .pageOptions div {
  display: inline;
  vertical-align:middle;
}

.pageOptions a, .pageOptions form {
  text-decoration: none;
  margin-left: 10px;
  vertical-align:middle;
  display:inline-block;
}

.pageOptions a:hover span {
  text-decoration: none;
}

.breadCrumbs {
  font-size: 13px;
  list-style: none;
  margin: 25px 0;
  padding: 0;
}

.breadCrumbs li {
  display: inline-block;
  color:transparent;
  position:relative;
}
.breadCrumbs li:after{
  content:'/';
  right: 1px;
  top: -2px;
  color: #3f4e62;
  font-size: 15px;
  position: absolute;
}
.breadCrumbs li a img{
  display:none;
}
.breadCrumbs li a,
.breadCrumbs li a span,
.messageFooter .breadCrumbs li a {
  text-decoration: none;
  color:#3f4e62;
}

.breadCrumbs li a:hover span,
.messageFooter .breadCrumbs li a:hover {
  color:#fff;
}



.contentHeader, .contentFooter {
  padding-bottom: 7px;
  width: 100%;
}

.contentFooter:after, .contentHeader:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.floatContainer:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.floatedElement {
  margin: 0 7px 0 0;
  padding: 0;
  display: block;
  float: left;
  position: relative;
}

.floatedElement:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.floatedElement label {
  font-size: .85em;
  white-space: nowrap;
  display: block;
  position: absolute;
  top: -2px;
}

.floatedElement input, .floatedElement select, .floatedElement p {
  margin: 1.5em 0 0 0;
  width: auto;
}

.floatedElement a img {
  margin-top: 12px;
  display: block;
}

.floatedElementLabel {
  min-width: 50px;
  text-align: right;
}

.followsFloatedElement {
  clear: both;
}

.floatedElementContainer {
  padding: 3px 0;
}

.floatedElementButtons {
  float: right;
}

.floatedElementButtons input, .floatedElementButtons img {
  margin: 1.25em 0 0 5px;
}

.floatTwoColumns {
  float: left;
  width: 49%;
}

.itemList, .itemList ol, .itemList ul {
  margin: 0 0 0 20px;
  padding: 2px 0;
}

.itemList, .itemList ul {
  padding-left: 23px;
}

.itemList {
  margin: 5px 0;
}

.itemList .itemListTitle {
  border-width: 0 0 1px 0 !important;
  margin: 0;
  padding: 5px;
  min-height: 21px;
}

.itemList h3.itemListTitle, .itemList h4.itemListTitle, .itemList h5.itemListTitle {
  font-weight: bold;
}

.itemList > li:last-child > .itemListTitle {
  border: 0;
}

.itemList .buttons {
  padding: 7px 0 4px 4px;
  float: right;
}

.itemList .buttons a {
  margin-left: 3px !important;
  padding: 0 !important;
}

.itemList .buttons input {
  margin: 0 0 -4px 5px !important;
  padding: 0 !important;
}

.itemList .buttons a.extraButton {
  margin: 0 0 -4px 10px !important;
  padding: 0 !important;
}

.itemList .inputText {
  width: auto;
}

.first .itemList {
  list-style-type: none;
  padding-left: 0;
}

#invitationContainer .itemList {
  margin: 5px 0 0 0;
}

#invitationContainer .itemList li {
  list-style-type: square;
  list-style-image: url("../icon/userS.png");
}

.socialBookmarks {
  margin: 7px 0 0 0;
  padding-bottom: 0;
  padding-left: 0;
  float: left;
}

.socialBookmarks:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.socialBookmarks li {
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
  list-style: none;
}

.simpleBar ul {
  text-align: center;
  list-style-type: none;
  margin: 7px 0 13px 0;
  padding: .5em 0;
}

.simpleBar li {
  display: inline;
}

.simpleBar li a {
  text-decoration: none;
  padding: .3em 7px;
}

.simpleBar li.selected a {
  text-decoration: none;
  padding: .3em 7px;
}

.simpleBar li a img {
  margin: -5px 0;
}

.slider {
  margin: 3px 0 10px 0;
  padding: 1px 2px 0 2px !important;
  position: relative;
  width: 250px;
}

.slider .handle {
  height: 9px;
  width: 9px;
  cursor: move;
}

.overlayBackground {
  color: #fff;
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
}

.overlay .buttonBar {
  padding-bottom: 7px;
}

.overlay .subHeadline .buttons {
  float: right;
}

.overlay .subHeadline .buttons img {
  display: inline;
}

.success, .warning, .error, .info {
  margin-bottom: 20px;
  padding: 7px 10px;
  text-align:left;
  color: #5c7595;
}

.success {
  background-color: rgba(0, 255,0, 0.1);
  border:1px solid rgba(0, 255, 0, 0.4);
}

.warning {
  background-color: rgba(0255,255,0,0.1);
  border:1px solid rgba(255,255,0,0.4);
}

.warning a, .warning a:hover {
  color: #333;
}

.error {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.4);
}

.error a,
.success a,
.info a{
  color: #99c5ff;
}

.error a:hover,
.error a:focus,
.error a:active,
.success a:hover,
.success a:focus,
.success a:active,
.info a:hover,
.info a:focus,
.info a:active{
  color:#fff;
}

.info {
  background: rgba(0, 0, 255, 0.1);
  border: 1px solid rgba(0, 0, 255, 0.4);
}

.info .close {
  float: right;
}

.innerError {
  margin-bottom: 5px;
  padding: 5px;
}

.tableList tr.disabled,
.tableList tr.disabled:hover,
.disabled div.messageInner {
  background-color: #333;
}

.disabled td, .disabled div.messageInner {
  background-image: none;
}

.tabMenuContent .disabled .messageInner *,
.disabled .messageSidebar *,
.tableList tr.disabled td,
.tableList tr.disabled td a,
.tableList tr.disabled td a:hover,
.tableList tr.disabled td .light,
.tableList tr.disabled td .light a,
.tableList tr.disabled:hover .columnTopic .topic a,
.tableList tr.disabled:hover .columnTitle a,
.tableList tr.disabled:hover .columnUsername a {
  color: #4b6495;
}

.disabled div.messageInner {
  border-color: #090 !important;
  border-style: dashed !important;
}

form .disabled, .tabMenu .disabled {
  opacity: .5;
}

.tableList tr.deleted,
.tableList tr.deleted:hover,
.deleted div.messageInner {
  background-color: #fee;
}

.deleted td, .deleted div.messageInner {
  background-image: none;
}

.tabMenuContent .deleted .messageInner *,
.deleted .messageSidebar *,
.tableList tr.deleted td,
.tableList tr.deleted td a,
.tableList tr.deleted td a:hover,
.tableList tr.deleted td .light,
.tableList tr.deleted td .light a,
.tableList tr.deleted:hover .columnTopic .topic a,
.tableList tr.deleted:hover .columnTitle a,
.tableList tr.deleted:hover .columnUsername a {
  color: #c00;
}

.deleted {
  border-color: #c00 !important;
  border-style: dashed !important;
}

.deleted img {
  opacity: .5 !important;
}

.tableList tr.marked .columnMarkTopics,
.tableList tr.marked:hover .columnMarkTopics,
.marked div.messageInner .columnMarkTopics,
li.floatedElement.marked .columnMarkTopics,
.tableList tr.marked .columnMark{
  background-color: rgba(0, 0, 255, 0.3);
}

.marked td,
.marked div.messageInner,
li.floatedElement.marked {
  background-image: none;
}

.tabMenuContent .marked .messageInner *,
.marked .messageSidebar *,
li.floatedElement.marked *,
.tableList tr.marked td,
.tableList tr.marked td a,
.tableList tr.marked td a:hover,
.tableList tr.marked td .light,
.tableList tr.marked td .light a,
.tableList tr.marked:hover .columnTopic .topic a,
.tableList tr.marked:hover .columnTitle a,
.tableList tr.marked:hover .columnUsername a {
  color: #555!important;
}

.marked {
  border-style: dashed !important;
}

.tableList .marked, .tableList .deleted, .tableList .activeContainer {
  border: none !important;
}

.highlight {
  color: #00f;
  background-color: #ff0;
  padding: 0 2px;
}

/* static: header.css */
#userNote {
  white-space: nowrap;
  padding: 10px 5px 3px 0;
}

.loginPopup {
  white-space: nowrap;
  position: absolute;
  z-index: 100;
}

.loginPopup .container-1 {
  padding: 7px 4px 3px 7px;
}

.loginPopup input[type="text"], .loginPopup input[type="password"] {
  font-size: 1em;
  width: auto !important;
}

.loginPopup input[type="checkbox"] {
  margin-top: 5px !important;
  margin-left: 0;
}

#userMenu {
  padding: 10px 5px 3px 5px;

}

#userMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#userMenu li {
  margin: 0 7px 0 0;
  float:right;
  display:inline-block;
}

#userMenu a {
  text-decoration: none;
}

#userMenu span {
  white-space: nowrap;
}

#userMenu a:hover span {
  color:#fff;
}

#userMenu .pageMenu {
  font-size: 1em;
}


#changeLanguageMenu span {
  margin: 0 0 0 10px !important;
  display:inline-block;
  vertical-align:middle;
}

#header {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  padding: 0;
  clear: both;
  position: relative;
  min-height: 0;
}

#header:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#headerContainer {
  border-bottom-width: 0;
}

#mainContainer {
  border-top-width: 0;
  border-bottom-width: 0;
  min-height:1100px;
}

#search {
  border-width: 0;
  border-style: solid;
  background-color: transparent;
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 100;
}


#search ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#search noscript p {
  margin: 3px 0 0 0;
  padding: 0;
}

#search input.searchSubmit {
  margin: -1px 0 0 0;
  padding-left: 1px;
  vertical-align: middle;
}



.searchInputMenu {
  font-size: 1.2em;
  position: relative;
}


#logo {
  width: 650px;
  height: 192px;
  /* background: url('/resources/images/blue_flame2.gif') -120px -0px repeat-x; */
  padding: 0;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

  .logo_gif{
    width: 296px;
    padding-left: 10;
    /* border-radius: 5px; */
    position: absolute;
    left: 160px;
    /* width: 132px; */
    top: 0px;
  }

.mainMenu {
  border-width: 0 1px 1px 1px;
  border-style: solid;
}

.mainMenu .mainMenuInner {
  margin: 0;

}

.mainMenu ul {
  list-style: none;
  margin: 0 0 -1px 0;
  padding: 0;
}

.mainMenu > div > ul > li {
  display: inline-block;
}



.mainMenu li.first a, .mainMenu li.firstActive a {
  margin-left: -1px;
}

.mainMenu span {
  padding: 0 2px 0 0;
}

.mainMenu div.popupMenu {
  font-size: 1em;
}

/* static: imageViewer.css */
.imageViewerBackground, .overlayBackground {
  color: #fff;
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.imageViewerCaption {
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  position: fixed;
  top: 5px;
  right: 0;
  left: 0;
  z-index: 110;
}

.imageViewerCurrentImage {
  background-color: #fff;
  border: 10px solid #fff;
  position: fixed;
  width: 400px;
  height: 300px;
  z-index: 110;
}

.imageViewerNavigation {
  border-width: 5px;
}

.imageViewerLoading {
  background-image: url("../images/spinner.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.imageViewerMenu {
  background-image: url("../images/imageViewer/menu.png");
  padding: 13px 10px;
  position: fixed;
  bottom: 10px;
  height: 24px;
  width: 224px;
  z-index: 120;
}

/* static: inlineCalendar.css */
.inlineCalendar {
  position: absolute;
  display: none;
  z-index: 100;
  width: 170px;
}

.inlineCalendarHeader, .inlineCalendarFooter {
  color: #fff;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-width: 1px;
}

.inlineCalendarHeader td, .inlineCalendarFooter td {
  text-align: center;
  font-weight: bold;
  padding: 0;
}

.inlineCalendarHeader td a, .inlineCalendarFooter td a {
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  padding: 1px;
  display: block;
}

.inlineCalendarHeader td span, .inlineCalendarFooter td span {
  border-width: 1px 0;
  border-style: solid;
  padding: 1px;
  display: block;
}

.inlineCalendarHeader td a:hover, .inlineCalendarFooter td a:hover {
  text-decoration: none;
}

.changeElement {
  width: 1.5em;
}

.inlineCalendarTable {
  border-width: 0 1px !important;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 0;
  border-bottom: 0;
  table-layout: fixed;
  width: 100%;
}

.inlineCalendarTable td {
  padding: 0;
  margin: 0;
}

.inlineCalendarTable a {
  text-align: center;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  margin: 1px;
  padding: 1px;
  display: block;
}

.weekDays {
  text-align: center;
}

/* static: layout.css */
.layout-1, .layout-2, .layout-3, .layout-4 {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.columnContainer {
  display: table-row;
  border:none;
}

.column {
  display: table-cell;
  margin: 0;
  padding: 0;
}

.layout-1 .columnInner {
  padding: 15px 25px;
}

.layout-2 .first {
  width: 65%;
}

.layout-2 .second {
  width: 35%;
}

.layout-2 .columnInner {
  padding: 15px 25px;
}

.layout-3 .first {
  width: 310px;
}

.layout-3 .columnInner {
  padding: 15px 25px;
}

.layout-4 .first, .layout-4 .third {
  width: 20%;
}

.layout-4 .second {
  width: 60%;
}

.layout-4 .first .columnInner, .layout-4 .third .columnInner {
  padding: 0;
}

.layout-4 .second .columnInner {
  padding: 0 10px;
}

.dataList {
  font-size: 100%;
  line-height: 1.3;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dataList li {
  padding: 5px;
  margin: 0 1px 1px 0;
}

.dataList li:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.dataList .buttons {
  padding: 7px 4px 4px 10px;
  float: right;
}

.dataList .buttons * {
  margin-right: 3px;
}

.contentBox {
  padding-bottom: 10px;
  min-width: 215px;
}

.contentBox .pageOptions {
  margin-top: 7px;
  margin-bottom: 7px;
}

/* static: messages.css */
.message {
  margin-bottom: 7px;
  padding: 0;
  clear: both;
}

.message h3, .message h4 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  padding-top: 7px;
  overflow: hidden;
  text-decoration: none;
  min-height: 0 !important;
}

.message h3 a, .message h3 a:hover, .message h4 a, .message h4 a:hover {
  text-decoration: none;
}

.message:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.messageInner {
  border-width: 1px;
  border-style: solid;
  margin: 0 !important;
  padding: 0;
  display: block;
}

.messageInner:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.messageMinimized .messageInner {
  padding: 5px 15px !important;
  clear: both;
}

.messageMinimized .messageInner p {
  padding: 0 35px;
  display: block;
}

.messageMinimized .messageInner img {
  float: left;
}

.messageMinimized .messageInner h3 {
  padding: 0 11px;
  display: block;
}

.messageMinimized.quickReply .messageInner h3 {
  min-height: 25px !important;
}

.message .messageLeft .messageSidebar, .message .messageFramedLeft .messageSidebar, .message .messageRight .messageSidebar, .message .messageFramedRight .messageSidebar {
  line-height: 1.3;
  margin: 0 0 -2.3em 0;
  padding: 0;
  width: 180px;
  overflow: hidden;
}

.message .messageTop .messageSidebar, .message .messageFramedTop .messageSidebar {
  line-height: 1.3;
  text-align: left;
  margin: 0 !important;
  padding: 10px 0 0 0;
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.message .guestPost .messageSidebar {
  min-height: 20px !important;
}

.message .messageLeft .messageSidebar, .message .messageFramedLeft .messageSidebar {
  float: left;
}

.message .messageRight .messageSidebar, .message .messageFramedRight .messageSidebar {
  float: right;
}

.message .messageSidebar:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.message .messageTop .messageAuthor, .message .messageFramedTop .messageAuthor {
  border-width: 0 !important;
  margin: 0 0 7px 95px;
  padding: 0 15px 1px 15px;
  float: left;
}

.message .messageLeft .messageAuthor, .message .messageRight .messageAuthor, .message .messageFramedLeft .messageAuthor, .message .messageFramedRight .messageAuthor {
  border-width: 0;
  margin: 0;
  padding: 10px 15px 7px 15px;
  display: block;
}

.message .dividers .messageAuthor {
  border-width: 0 0 1px 0;
  border-style: solid;
  margin-bottom: -1px;
}

.message .guestPost .messageAuthor {
  margin-left: 0 !important;
}

.message .messageSidebar .userName {
  margin: 0;
  padding: 0;
}

.message .messageSidebar .userName a {
  text-decoration: none;
  vertical-align:middle;
}

.message .messageSidebar .userName a span {
  font-weight: bold;
}

.message .userAvatar {
  margin: 0;
  padding: 7px 15px;
  display: block;
}

.message .dividers .userAvatar {
  border-width: 1px 0 0 0 !important;
  border-style: solid;
}

.message .userAvatar a {
  margin: 0;
  padding: 0;
}

.message .messageLeft .userAvatarFramed, .message .messageRight .userAvatarFramed, .message .messageFramedLeft .userAvatarFramed, .message .messageFramedRight .userAvatarFramed {
  text-align: left;
  border-width: 1px;
  border-style: solid;
  margin: 7px 13px;
  padding: 0;
  width: 152px;
  height: 152px;
  position: relative;
}

.message .messageLeft .userAvatarFramed a, .message .messageRight .userAvatarFramed a, .message .messageFramedLeft .userAvatarFramed a, .message .messageFramedRight .userAvatarFramed a {
  border-width: 1px;
  border-style: solid;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 150px;
  position: absolute;
}

.message .userAvatarFramed a img {
  position: absolute;
  top: 50%;
  left: 50%;
}

.message .messageTop .userAvatar, .message .messageFramedTop .userAvatar {
  margin: 10px 15px;
  padding: 0;
  width: 76px;
  height: 76px;
  position: relative;
}

.message .messageTop .userAvatar, .message .messageFramedTop .userAvatar {
  position: absolute;
  top: 2px;
  left: 2px;
}

.message .messageTop .userAvatarFramed, .message .messageFramedTop .userAvatarFramed {
  position: absolute;
  top: 0;
  left: 0;
}

.message .messageTop .userAvatarFramed, .message .messageFramedTop .userAvatarFramed {
  border-width: 1px;
  border-style: solid;
  margin: 10px 15px;
  padding: 0;
  width: 78px;
  height: 78px;
  display: block;
}

.message .messageTop .userAvatarFramed a, .message .messageFramedTop .userAvatarFramed a {
  border-width: 1px;
  border-style: solid;
  margin: 0;
  padding: 0;
  display: block;
  width: 76px;
  height: 76px;
}

.message .messageTop .userSymbols, .message .messageFramedTop .userSymbols {
  border-width: 0 !important;
  margin: 0 0 7px 0;
  padding: 0 15px;
  float: right;
}

.message .dividers .userSymbols {
  border-width: 1px 0 0 0;
  border-style: solid;
}

.message .messageLeft .userSymbols, .message .messageRight .userSymbols, .message .messageFramedLeft .userSymbols, .message .messageFramedRight .userSymbols {
  margin: 0;
  padding: 7px 15px;
}

.message .messageLeft.dividers .userSymbols, .message .messageRight.dividers .userSymbols, .message .messageFramedLeft.dividers .userSymbols, .message .messageFramedRight.dividers .userSymbols {
  border-width: 1px 0 0 0;
  border-style: solid;
}

.message .userSymbols ul {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}

.message .messageTop .userSymbols ul, .message .messageFramedTop .userSymbols ul {
  padding: 0;
}

.message .userSymbols ul li {
  display: inline;
}

.message .messageTop .userCredits, .message .messageFramedTop .userCredits {
  border-width: 0 !important;
  margin: 0 0 7px 0;
  padding: 0;
  float: right;
  clear: right;
}

.message .messageLeft .userCredits, .message .messageRight .userCredits, .message .messageFramedLeft .userCredits, .message .messageFramedRight .userCredits {
  margin: 0;
  padding: 7px 15px;
}

.message .dividers .userCredits {
  border-width: 1px 0 0 0;
  border-style: solid;
}

.message .userCredits .userPosts a {
  padding: 0 0 3px 0;
  display: block;
}

.message .messageTop .userCredits p, .message .messageFramedTop .userCredits p {
  margin: 0;
  padding: 0 15px;
}

.message .messageTop .userMessenger, .message .messageFramedTop .userMessenger {
  text-align: left;
  border-width: 0 !important;
  margin: 0 0 7px 95px;
  padding: 0 15px;
  clear: left;
}

.message .messageTop.guestPost .userMessenger, .message .messageFramedTop.guestPost .userMessenger {
  border-width: 0 !important;
  margin: 0;
  padding: 10px 15px;
  position: absolute;
  top: 0;
  right: 0;
}

.message .dividers .userMessenger {
  border-width: 1px 0 0 0;
  border-style: solid;
}

.message .messageLeft .userMessenger, .message .messageRight .userMessenger, .message .messageFramedLeft .userMessenger, .message .messageFramedRight .userMessenger {
  margin: 0;
  padding: 7px 15px 0 15px;
}

.message .messageLeft.dividers .userMessenger, .message .messageRight.dividers .userMessenger, .message .messageFramedLeft.dividers .userMessenger, .message .messageFramedRight.dividers .userMessenger {
  border-width: 1px 0 0 0;
  border-style: solid;
}

.message .userMessenger ul {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}

.message .messageTop .userMessenger ul, .message .messageFramedTop .userMessenger ul {
  padding: 0;
}

.message .userMessenger ul li {
  display: inline;
}

.message .messageContent {
  border-style: solid;
  padding: 0;
}

.message .messageLeft .messageContent {
  border-width: 0 0 0 1px;
  margin: 0 0 0 180px;
}

.message .messageFramedLeft .messageContent {
  border-width: 1px;
  margin: 10px 15px 10px 180px;
}

.message .messageRight .messageContent {
  border-width: 0 1px 0 0;
  margin: 0 180px 0 0;
}

.message .messageFramedRight .messageContent {
  border-width: 1px;
  margin: 10px 180px 10px 15px;
}

.message .messageTop .messageContent {
  border-width: 1px 0 0 0;
  margin: 0;
}

.message .messageFramedTop .messageContent {
  border-width: 1px;
  margin: 0 15px 10px 15px;
}

.message .messageContent:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.message .messageContentInner {
  border-width: 0;
  border-style: solid;
  margin: 0;
  padding: 10px 15px;
}

.message .messageLeft .messageContentInner, .message .messageRight .messageContentInner {
  border-width: 0;
}

.message .messageFramedLeft .messageContentInner, .message .messageFramedRight .messageContentInner, .message .messageFramedTop .messageContentInner {
  border-width: 1px;
}

.message .messageContentInner:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.message .messageHeader {
  border-style: solid;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin: 0;
  padding: 0;
  min-height: 30px;
}

.message .messageHeader .containerIcon {
  text-align: left;
  margin: 0;
  padding: 0 0 3px 0;
  width: 25px;
}

.message .messageHeader .containerContent {
  padding-bottom: 7px;
}

.message .messageHeader .containerContent p {
  padding: 3px 0 0 0;
}

.message .messageHeader .messageMarkCheckBox {
  margin: 0;
  padding: 0;
}

.message .messageHeader .messageCount {
  float: right;
}

.message .messageHeader .messageNumber {
  text-decoration: none;
  margin: 0 0 0 4px;
  padding: 0 4px;
}

.message .messageBody {
  margin: 0;
  padding: 7px 0 0 0;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.message input {
  margin-right: 6px;
}

.message .poll {
  margin: 0 15px 7px 0;
  float: left;
  width: 47%;
}

.poll .container-1, .poll .container-2, .poll .container-3 {
  padding: 4px;
}

.poll .containerContent label {
  display: block;
  overflow: hidden;
}

.poll h4 {
  font-style: italic;
  font-weight: bold;
  padding-top: 0;
}

.poll .pollResults {
  font-size: .95em;
  text-align: right;
}

.pollOptionBar {
  margin-right: 4px;
  float: left;
  height: 6px;
}

.pollBarColor1 {
  background-color: #93befe;
  border-bottom: 6px solid #468ffc;
}

.pollBarColor2 {
  background-color: #6be8ff;
  border-bottom: 6px solid #02c4e7;
}

.pollBarColor3 {
  background-color: #b8fb82;
  border-bottom: 6px solid #30ff00;
}

.pollBarColor4 {
  background-color: #f6ff00;
  border-bottom: 6px solid #ede502;
}

.pollBarColor5 {
  background-color: #ffc676;
  border-bottom: 6px solid #ff9600;
}

.pollBarColor6 {
  background-color: #fe9595;
  border-bottom: 7px solid #fe4747;
}

.pollBarColor7 {
  background-color: #f9f;
  border-bottom: 6px solid #f6f;
}

.pollBarColor8 {
  background-color: #c7a2e7;
  border-bottom: 7px solid #a56dd5;
}

.pollBarColor9 {
  background-color: #e1bb84;
  border-bottom: 6px solid #ca8a2f;
}

.pollBarColor10 {
  background-color: #c3bbbb;
  border-bottom: 6px solid #967e7e;
}

.message .signature {
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  margin: 7px 0 0 0;
  padding: 7px 0 0 0;
  overflow: hidden;
  position: relative;
}

.message .editNote, .message .deleteNote {
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  margin: 7px 0 0 0;
  padding: 7px 0 0 0;
  position: relative;
}

.message .messageFooter, .message .messageFooterLeft, .message .messageFooterRight {
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  margin: 7px 0 0 0;
  padding: 0;
  clear: both;
  display: block;
  position: relative;
}

.message .messageFooter:after, .message .messageFooterLeft:after, .message .messageFooterRight:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.message .messageFooter .breadCrumbs {
  margin-top: 10px;
}

.message .messageFooter .smallButtons li {
  float: right;
}

.message .messageFooter .smallButtons .extraButton {
  margin-left: 10px;
  margin-right: 0;
}

.message .messageFooterLeft {
  text-align: right;
}

.message .messageFooterLeft .smallButtons li {
  float: left;
}

.message .messageFooterLeft .smallButtons .extraButton {
  margin-left: 0;
  margin-right: 10px;
}

.message .messageFooterRight {
  text-align: left;
}

.message .messageFooterRight .smallButtons li {
  float: right;
}

.message .messageFooterRight .smallButtons .extraButton {
  margin-left: 10px;
  margin-right: 0;
}

.attachmentPreview {
  margin-bottom: 0;
}

.attachmentPreview ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attachmentPreview ul li {
  border-style: solid;
  border-width: 1px;
  margin-bottom: 7px;
  text-align: center;
}

.attachmentPreview ul li a {
  border-style: solid;
  border-width: 1px;
  display: block;
}

.attachmentPreview ul li img {
  display: inline;
  position: relative;
  top: 50%;
}

.attachmentPreview ul li a span {
  background-image: url("../icon/zoomInS.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin: 5px 3px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 95%;
  height: 95%;
  visibility: hidden;
}

.attachmentPreview ul li a:hover span {
  visibility: visible;
}

.attachmentFile:after {
  clear: none;
}

.attachmentFile input, .attachmentFile button {
  float: right;
}

.attachmentFile ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.attachmentFile ul li {
  border-width: 1px 0 0 0;
  border-style: solid;
  margin: 0;
  padding: 5px 0;
  min-height: 22px;
}

.attachmentFile ul li:first-child {
  border: none;
}

.attachmentFile ul li div {
  padding: 3px 0 0 30px;
}

.attachmentFile ul li a img {
  float: left;
}

.attachmentsInput {
  padding: 1px 0 3px 0;
}

.attachmentsInput input {
  margin-top: 2px;
  width: 100%;
}

.attachmentsInputSubmit {
  float: right;
}

.quoteBox {
  border-width: 1px;
  border-style: solid;
  margin: 0 0 7px 0;
  display: block;
  clear: both;
  position: relative;
}

.quoteBox .quoteHeader {
  margin: 1px 1px 0 1px;
  padding: 7px 15px 7px 15px;
}

.quoteBox .quoteHeader h3 {
  font-style: italic;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.quoteBox .quoteHeader h3 img {
  margin-top: -2px;
  padding-right: 3px;
  vertical-align: middle;
}

.quoteBox .quoteBody {
  margin: 0 1px 1px 1px;
  padding: 0 15px 5px 15px;
}

.quoteBox .quoteBody:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}

.codeBox {
  border-width: 1px;
  border-style: solid;
  margin: 0;
  padding: 1px;
  clear: both;
  position: relative;
  font-style: normal;
  text-align: left;
  font-weight: normal;
}

.codeBox h3 {
  font-style: italic;
  font-weight: bold;
  margin: 0;
  padding: 5px;
}

.codeBox table {
  border-spacing: 0;
  width: 100%;
}

.codeBox pre {
  margin: 0;
  padding: 0 5px;
  font-family: monospace;
}

.codeBox .codeLines, .codeBox .codeLineNumbers {
  vertical-align: top;
}

.codeBox .codeLineNumbers img {
  padding: 5px;
}

.codeBox .codeLineNumbers {
  text-align: right;
}

.codeBox .codeLines {
  width: 100%;
}

.codeBox div {
  overflow: auto;
}

.smileys {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smileys li {
  margin-right: 5px;
  display: inline;
}

.messagePreview .message {
  margin: -1px 0 0 -1px;
  padding: 0;
  border: 0;
}

.message .breadCrumbs {
  float: left;
}

/* static: pageMenu.css */
div.pageMenu {
  margin: 0;
  text-align: left;
  color: #5c7595;
}

div.pageMenu ul {
  display: block !important;
  float: none !important;
  font-weight: normal !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

div.pageMenu li {
  border: 0;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.pageMenu a, div.pageMenu a:hover {
  display: block !important;
  background-color: transparent;
  background-image: none;
  border-width: 0;
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 7px 5px 35px !important;
  text-align: left !important;
  text-decoration: none !important;
}

div.popupMenu a, div.popupMenu a:hover {
  padding: 5px 7px !important;
}

.mainMenu div.popupMenu a, .mainMenu div.popupMenu a:hover {
  padding: 5px 7px 5px 35px !important;
}


div.pageMenu span {
  display: block;
  margin: 0 !important;
  padding: 3px 13px 2px 0 !important;
  text-decoration: none !important;
}

div.pageMenu li.container-1, div.pageMenu li.container-2 {
  margin: 0 1px 1px 0 !important;
}

div.pageMenu .twoRows li {
  line-height: 1.3;
}

div.pageMenu .twoRows a {
  margin: 0 !important;
  padding-bottom: 4px !important;
  padding-top: 2px !important;
  min-height: 24px;
}

div.pageMenu .twoRows img {
  margin-left: -27px;
  margin-top: 3px;
}

div.pageMenu .twoRows label {
  cursor: pointer;
  display: block;
  margin: 0 !important;
  padding: 0 0 0 5px !important;
}

div.pageMenu .twoRows a span {
  padding: 0 0 0 5px !important;
}

div.pageMenu .twoRows a:hover span {
  text-decoration: none !important;
}

.popupMenu {
  position: absolute;
  white-space: nowrap;
  z-index: 30;
  margin: 0;
  text-align: left;
  
  background: #12161b;
  border: 1px solid #202138;
  padding: 5px;
  color: #5c7595;
}

/* static: pageNavigation.css */
.pageNavigation {
  margin-top: .5em;
  margin-right: 20px;
  margin-bottom: 5px;
  float: left;
  clear: left;
}

.pageNavigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pageNavigation li {
  border-width: 1px;
  border-style: solid;
  margin-right: 3px;
  float: left;
  position: relative;
}

.pageNavigation li.active, .pageNavigation li:active {
  border-width: 1px;
  border-style: solid;
}

.pageNavigation a, .pageNavigation li span {
  text-align: center;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  padding: 0 4px;
  display: block;
}

.pageNavigation li div {
  text-align: center;
  margin-left: -1px;
  padding: 0 0 .4em 0;
  position: absolute;
  bottom: 1.6em;
  width: 12em;
  z-index: 200;
  display: none;
  opacity: .9;
}

.pageNavigation li:hover div {
  display: block;
}

.pageNavigation li ul {
  border: 1px;
  padding: 0 0 2px 2px;
  float: left;
  clear: left;
}

.pageNavigation li ul li {
  text-align: right !important;
  margin-top: 2px;
}

.pageNavigation .skip, .pageNavigation .skip:hover, .pageNavigation .skip:active {
  border: none;
}

.pageNavigation .skip a, .pageNavigation .skip a:hover, .pageNavigation .skip a:active, .pageNavigation .skip span {
  background-color: transparent;
  background-image: none !important;
  border: none;
  margin: 0;
  padding: 0;
}

.pageNavigation .skip {
  padding: 1px 1px !important;
  width: 16px;
}

.pageNavigation .skip img {
  vertical-align: middle;
}

.pageNavigation input {
  text-align: center;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 2px 0;
  width: 2.5em;
  min-height: 1.84em;
  display: none;
}

.pageNavigation .children {
  padding: 0;
}

.pageNavigation a, .pageNavigation li ul, .pageNavigation li {
  border-width: 1px;
}

.pageNavigation a, .pageNavigation li.children span {
  border-color: #fff;
  border-style: solid;
}

.statusDisplay .pageNavigation {
  margin: 0;
  padding: 0 0 2px 0;
}

/* static: privateMessagesGlobal.css */
.pmBoxFull {
  color: #c00;
  font-weight: bold;
}

#pmOutstandingNotifications ul {
  list-style-type: square;
  list-style-image: url("../icon/pmEmptyS.png");
  margin: 5px 0 0 15px;
  padding: 0 0 0 9px;
}

#pmOutstandingNotifications ul a {
  padding-left: 3px;
}

/* static: profile.css */
#userCard {
  line-height: 1.3;
  margin-bottom: 23px;
  display: block;
  clear: both;
  position: relative;
}

#userCard:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#userCard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

#userCard ul:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#userCardAvatar {
  margin: 0;
  padding: 0;
  float: left;
  height: auto;
}

#userCardAvatar .userAvatar {
  margin: 10px;
  padding: 0;
  display:block;
  width:calc(100% - 20px);
  text-align:center;
}

#userCardAvatar .userAvatar a {
  display: block;
  width:100%;
}
#userCardAvatar .userAvatar a img{
  max-width:100%;
}
#userCardCredits {
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color:#202138;
  margin: 0;
  padding: 0 25px;
}

#userCardCredits .userName {
  font-weight: bold;
}
#userCardCredits .userName span{
  vertical-align:middle;
}
#userCardCredits .userPersonals {
  padding-top: 7px;
  width: 50%;
  min-height: 59px;
  overflow: hidden;
}

#userCardCredits .userPersonals p {
  padding-bottom: 3px;
}

#userCardCredits .userStatus {
  display: block;
  clear: both;
}

#userCardCredits .userStatus li {
  text-decoration: none;
  display: inline;
}

#userCardCredits .userStatus li a {
  text-decoration: none;
  margin-right: 3px;
  float: left;
}

#userCardCredits .userStatus li a img {
  margin: 0 !important;
  padding: 0 !important;
}

#userCardCredits .smallButtons {
  position: absolute;
  top: 5px;
  right: 25px;
}

#userCardCredits .smallButtons li a {
  text-align: center !important;
  cursor: pointer;
}
#userCardCredits .smallButtons li a:hover span,
#userCardCredits .smallButtons li a:focus span,
#userCardCredits .smallButtons li a:active span{
  color:#99c5ff;
}
#userCardCredits .smallButtons img {
  margin: 0 auto;
  padding-top: 4px;
  display: block;
}

.friendsConnection {
  border-width: 1px 0 0 0;
  border-style: dotted;
  border-color:#202138;
  margin: 7px 0 0 0;
  padding: 7px 0 0 0;
}

.friendsConnection:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.friendsConnection h3 {
  font-weight: bold;
  padding-bottom: 3px;
}

.friendsConnection .avatarFrame {
  margin: 0 auto;
  display: block;
  position: relative;
  height: 48px;
  max-width: 48px;
}

.friendsConnection .avatarFrame img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.friendsConnection a .avatarCaption {
  padding-bottom: 5px;
  display: block;
  color:#99c5ff;
}
.friendsConnection a:hover .avatarCaption,
.friendsConnection a:focus .avatarCaption,
.friendsConnection a:active .avatarCaption{
  color:#fff;
}
.friendsNetwork {
  border-width: 1px 0 0 0;
  border-style: dotted;
  margin: 7px 0 0 0;
  padding: 7px 0;
}

.friendsNetwork:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.friendsNetwork h3 {
  font-weight: bold;
  padding-bottom: 3px;
}

.friendsNetwork .digitDisplay {
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
  background-repeat: no-repeat;
  background-position: center 2px;
  padding: 23px 10px 2px 10px !important;
  display: block;
  min-height: 18px;
}

.friendsNetwork .network1 .digitDisplay {
  background-image: url("../images/network-1.png");
}

.friendsNetwork .network2 .digitDisplay {
  background-image: url("../images/network-2.png");
}

.friendsNetwork .network3 .digitDisplay {
  background-image: url("../images/network-3.png");
}

.friendsNetwork a .digitCaption {
  text-decoration: underline;
  padding-bottom: 5px;
  display: block;
}

.friendsNone {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color:#202138;
  margin: 7px 0 0 0;
  padding: 7px 0 0 0;
}

.friendsNone:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.friendsNone h3 {
  font-size: 1.4em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  padding: 13px 10px 10px 10px !important;
  display: block;
}

.guestAdvice {
  border-width: 1px 0 0 0;
  border-style: dotted;
  margin: 7px 0 0 0;
  padding: 7px 0 0 0;
}

.guestAdvice:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.guestAdvice h3 {
  font-size: 1.4em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  padding: 13px 10px 10px 10px !important;
  display: block;
}

.dynContainer {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dynContainer .dynItem {
  float: left;
  overflow: hidden;
}

.dynItems5 .dynItem {
  width: 20% !important;
}

.dynItems4 .dynItem {
  width: 25% !important;
}

.dynItems3 .dynItem {
  width: 33% !important;
}

.dynItems2 .dynItem {
  width: 50% !important;
}

.dynItems1 .dynItem {
  width: 100% !important;
}

.dynContainer .dynItem .dynBox {
  text-align: right;
  line-height: 1.3em;
  background-image: url("../images/friendsConnectionLine.png");
  background-repeat: no-repeat;
  background-position: 0 23px;
  display: block;
  float: right;
  position: relative;
  width: 100%;
}

.dynBox .dynBoxInner {
  text-align: center;
  background-image: url("../images/friendsConnectionArrow.png");
  background-repeat: no-repeat;
  background-position: 0 23px;
  display: block;
  float: right;
  width: 75%;
  min-width: 85px;
}

.dynBoxInner a {
  text-decoration: none;
  display: block;
}

.dynBoxInner a:hover span {
  text-decoration: none !important;
}

.thumbnailView li:after {
  clear: none;
  display: inline;
}

.thumbnailView li.floatedElement {
  margin: 3px 0;
  overflow: hidden;
  padding: 0 0 5px 0;
  text-align: center;
  width: 20%;
}

.thumbnailView li.floatedElement a {
  margin: 0 7px;
  display: block;
  overflow: hidden;
}

.thumbnailView li.floatedElement p {
  margin: 0 7px;
}

.thumbnailView .thumbnail {
  display: block;
  height: 48px;
  margin: 0 auto 3px auto;
  position: relative;
  width: 48px;
}

.thumbnailView .thumbnail img {
  bottom: 0;
  left: 0;
  position: absolute;
}

.thumbnailView.squared .thumbnail {
  height: 75px !important;
}

#tplUserProfile .signature {
  border-width: 1px 0;
  margin-top: 7px;
  margin-bottom: -6px;
  padding: 7px 0;
}

.guestBook .contentHeader, .guestBook .contentFooter {
  margin-top: 7px;
}

.guestBook .message {
  margin-bottom: 7px;
}

.guestBook .messageInner {
  padding: 10px 20px !important;
}

.guestBook .messageAnswer {
  margin-left: 50px !important;
  margin-bottom: 23px !important;
}

.guestBook .messageAnswer h4 {
  display: inline !important;
}

.guestBook .messageAnswer p {
  padding-bottom: 7px;
}

.memberList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.memberList:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.memberList li {
  border: 1px;
  margin: 5px 10px 5px 0;
  padding: 1px;
  display: block;
  float: left;
  position: relative;
  width: 200px;
}

.memberList li .memberName {
  text-decoration: none;
  border-width: 0 1px 0 0;
  border-style: solid;
  padding: 3px 3px 3px 24px;
  display: block;
  width: 150px;
  overflow: hidden;
}

.memberList li > img {
  margin: -8px 4px 0 4px;
  position: absolute;
  top: 50%;
  left: 0;
}

.memberList li a > img {
  border: none;
  margin: -12px 4px 0 4px;
  padding: 4px 3px;
  position: absolute;
  top: 50%;
  right: -3px;
}

.memberList li .acceptButton img {
  padding-right: 26px
}

.membersList td {
  text-align: center;
}

.membersList td.columnUsername {
  text-align: left;
}

.membersList td.columnAvatar {
  height: 50px;
}

.memberList .memberListNoDelete .memberName {
  border: 0;
  width: 173px;
}

.avatarShow {
  text-align: center;
  padding-bottom: 20px;
}

.avatarSelect {
  margin: 7px 0;
  float: left;
  clear: both;
  display: block;
}

.avatarSelect ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.avatarSelect li {
  margin: 0 7px 7px 0;
  float: left;
}

.avatarSelect li label {
  border-width: 1px;
  padding: 1px;
  position: relative;
  width: 150px;
  height: 150px;
  display: block;
}

.avatarSelect li label:hover {
  cursor: pointer;
}

.avatarSelect li label input {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
}

.avatarSelect li label img {
  position: absolute;
  top: 50%;
  left: 50%;
}

.userGroupsList {
  list-style-type: square;
}

.userGroupsList h4 {
  margin-bottom: 5px;
  font-weight: bold;
}

.userGroupsList p {
  margin-bottom: 5px;
}

.userGroupsList li {
  margin-bottom: 5px;
  clear: both;
}

.userGroupsList li .smallButtons {
  float: right;
  clear: both;
  position: relative;
}

.stylePreviewImageContainer {
  margin-top: 3px;
}

/* static: tabbedMenus.css */
.tabMenu {
  margin-top: 5px;
  clear: both;
  width: 100%;
}

.tabMenu:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.tabMenu ul {
  margin: 0;
  padding: 0 0 0 10px;
}

.tabMenu li {
  list-style: none;
  margin-right: 3px;
  float: left;
}

.tabMenu li a {
  border: 1px solid #202138;
  padding: 6px 6px 0 6px;
  display: block;
  position: relative;
  z-index: 10;
  color:#99c5ff;
}
.tabMenu li a:hover,
.tabMenu li a:focus,
.tabMenu li a:active{
  color:#fff;
}
.tabMenu li.activeTabMenu a {
  border-bottom: none;
  padding-bottom: 3px;
  position: relative;
  z-index: 20;
  background: #0e0e0e;
  margin-bottom: -1px;
}

.tabMenu li a, .tabMenu li.activeTabMenu a {
  min-height: 24px;
}
#mce_editor_0_parent .subTabMenu{
  border: 1px solid #202138;
}
.subTabMenu {
  position: relative;
}

.subTabMenu:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.subTabMenu .containerHead {
  margin: 0;
  height:auto;
}


.subTabMenu .containerHead:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}

.subTabMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subTabMenu li {
  float: left;
}

.subTabMenu li a {
  text-decoration: none;
  white-space: nowrap;
  margin: 1px 2px;
  padding: 2px 7px;
  display: block;
}

.subTabMenu li.activeSubTabMenu a, .subTabMenu li a:hover {
  border-width: 1px;
  padding: 1px 6px;
}


.contentBox .border .subTabMenu {
  border: none;
  margin: 0 0 1px 0;
  padding: 0;
}


.tabMenuContent {
  clear: both;
}

.tabMenuContent > div {
  padding: 10px;
}

.tabMenuContent .subHeadline {
  margin-bottom: 2px;
}

.tabMenuContent h3.containerContent {
  margin-top: 0;
  margin-bottom: 0;
}

.tabMenuContent fieldset.noJavaScript {
  background: transparent;
  border: 0;
  margin: 0;
  padding-top: 13px;
}

.tabMenuContent legend.noJavaScript {
  display: none;
}

.tabMenuContentContainer {
  clear: both;
}

.tabMenuContent .message {
  margin-bottom: 7px;
}

.tabMenuContent .messageInner .smallButtons:after {
  clear: none;
}

.tabMenuContent .message .messageHeading {
  margin-top: 0 !important;
}

.tabNavigation {
  float: right;
}

/* static: tableBBCodeSelection.css */
#tableBBCodeContainer {
  padding: 0 5px;
  position: absolute;
}

#tableBBCodeContainer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#tableBBCodeContainer ul li {
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  margin: 0 1px 1px 0;
  display: inline-block;
  cursor: pointer;
}

/* static: tables.css */
.tableList {
  border-spacing: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.tableList tbody tr:hover .columnTopic .topic p a, .tableList tbody tr:hover .columnUsername p a, .tableList tbody tr:hover .columnTitle p a {
  text-decoration: none;
}

.tableList th {
  border-width: 0 1px 1px 0;
  border-style: solid;
  font-weight: normal;
  border-color: #202138;
}

.tableList td {
  border-width: 0 1px 1px 0;
  border-style: solid;
  padding: 4px;
  border-color: #202138;
}

.tableList td a {
  text-align: left;
}

.tableHead a, .tableHead .emptyHead {
  border:none;
  display: block;
  line-height: 1.8;
  margin: -1px;
  min-height: 28px;
  padding: 0 5px;
  text-align: center;
  text-decoration: none;
  color: #999;
}

.tableHead .emptyHead input {
  margin-top: 6px;
}

.tableHead {
  white-space: nowrap;
}

.tableHead a img {
  margin-top: -7px;
  padding: 0;
}

.tableList td.columnText {
  text-align: left;
}

.tableList td.columnNumbers, .tableList td.columnDate {
  text-align: right;
  white-space: nowrap;
}

.tableList td.columnID {
  width: 1%;
  text-align: right;
}

.tableList td.columnMark {
  width: 1%;
}

.tableList .statusDisplay {
  float: right;
  padding: 1px 0;
}

.tableList .statusDisplayIcons {
  display: inline-block;
  margin-left: 5px;
}

.tableList td.columnIcon {
  width: 1%;
  white-space: nowrap;
}

.tableList td.actionIcons img {
  display: inline !important;
}

.tableList .deleteNote {
  border-width: 0 !important;
  margin-top: 3px;
  padding-top: 3px;
}

/* static: tagCloud.css */
.tagList {
  margin: 0;
  padding: 5px;
}

.tagCloud {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

.tagCloud li {
  line-height: 1.1;
  display: inline;
}

.tagCloud a {
  text-decoration: none;
  white-space: nowrap;
  padding: 2px;
}

.tagCloud a:hover {
  text-decoration: underline;
}

.sidebar .tagCloud {
  padding: 5px;
}

/* static: wysiwyg.css */
.editorFrame .formFieldLabel {
  display: block;
  width: auto;
}

.editorFrame .formField {
  margin: 0 !important;
  width: 100%;
}

.editorFrame .border {
  margin-bottom: 0 !important;
}

.formError .mceErrorBorder {
  border-color: #c00;
  margin-top: 1px;
  z-index: 1;
}

.editor {
  padding-top: 1px;
}

.editor .formFieldLabel {
  width: 0;
  display: none !important;
}


.editorFrame .subTabMenu .containerHead div {
  height: auto;
}

.mceToolbar {
  height: auto !important;
  display: block;
}

.mceToolbar ul {
  margin: 0 3px;
  padding: 0;
  width: 99.5%;
  display: block;
  float: left;
}

.mceToolbar li {
  display: block;
  position: relative;
}

.mceToolbar li a {
  margin: 1px;
  padding: 1px;
}

.mceToolbar li a:hover {
  margin: 1px;
  padding: 0;
}

.mceToolbar li.activeSubTabMenu a {
  margin: 1px;
  padding: 0;
}

.mceSeparator {
  border: 0;
  margin: 2px 3px 0 3px;
  padding: 0;
}

.fontFormat {
  font-size: 10pt;
  margin-right: 5px !important;
  height: 1.7em;
}

.mceButtonDisabled a img {
  cursor: default;
  opacity: .3;
}

.mceButtonDisabled a:hover {
  background: transparent !important;
  border: 1px solid transparent !important;
}

.editorFrame .popupMenu {
  opacity: 1.0 !important;
}

div.mceColors {
  background-color: #000;
  float: left;
  width: 113px !important;
}

div.mceColors ul {
  list-style: none;
  margin: 0;
  padding: 1px 0 0 1px;
  width: auto;
}

div.mceColors ul li {
  margin: 0 1px 1px 0 !important;
  padding: 0 !important;
  float: left !important;
  display: block !important;
  height: 15px !important;
  width: 15px !important;
}

div.mceColors ul li a, div.mceColors ul li a:hover {
  background-image: none;
  background-repeat: no-repeat !important;
  background-position: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  height: 15px !important;
  width: 15px !important;
}

div.mceColors ul li a:hover {
  background-repeat: no-repeat !important;
  background-position: -1px -1px !important;
  border: 1px solid #fff !important;
  width: 13px !important;
  height: 13px !important;
}

.mceEditorIframe {
  width: 100%;
}

.iframeHTML, .iframeBody {
  background-color: transparent !important;
  background-image: none !important;
  min-width:100%!important;
  position:initial!important;
  clear: both;
}

.iframeBody p {
  margin-bottom: auto;
}

blockquote.wysiwygQuote {
  border-width: 1px;
  border-style: solid;
  margin: 20px;
  padding: 5px;
}

.editorCodeView {
  border: 0;
  margin: 0;
  padding: 0;
  display: none;
  overflow: auto;
}

.mceInputText {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.mceResizeIconRow {
  border: none !important;
}

.mceResizeIconRow div {
  height: 24px;
}

.mceResizeIcon {
  cursor: se-resize;
  background-image: url('../icon/wysiwyg/editorResizeM.png');
  background-repeat: no-repeat;
  float: right;
  height: 24px !important;
  width: 24px;
}

.mceResizeBox {
  border-width: 1px;
  border-style: dotted;
  display: none;
}

/* dynamic style attributes */

.buttonBar, .deleteNote, .editNote, .itemList .itemListTitle, .mainMenu div.pageMenu .bottomSeparator a, .mainMenu div.pageMenu .topSeparator a, .messageFooter, .messageFooterLeft, .messageFooterRight, .messageHeader, .signature, .subHeadline, div.pageMenu .bottomSeparator a, div.pageMenu .topSeparator a {
  border-style: solid
}

.blog .userBlogCategoryAdd {
  border-top-style: solid
}

.blogBoxArchive .itemList > li > .itemList > li > .itemList, .blogBoxArchive .itemList > li > .itemList > li > .itemListTitle, .blogBoxArchive > .border > .itemList > li:last-child > .itemListTitle {
  border-top-style: solid
}

.mainMenu div.pageMenu .bottomSeparator a, div.pageMenu .bottomSeparator a {
  border-bottom-width: 1px
}

.blog .userBlogCategoryAdd, .mainMenu div.pageMenu .topSeparator a, div.pageMenu .topSeparator a {
  border-top-width: 1px
}

.blogBoxArchive .itemList > li > .itemList > li > .itemList, .blogBoxArchive .itemList > li > .itemList > li > .itemListTitle, .blogBoxArchive > .border > .itemList > li:last-child > .itemListTitle {
  border-top-width: 1px
}

.deleteNote, .editNote, .itemList .itemListTitle, .messageFooter, .messageFooterLeft, .messageFooterRight, .messageHeader, .signature, .subHeadline {
  border-width: 1px
}


.inputText, select, textarea {
  background-color: #fff
}


.inputText, select, textarea {
  border-color: #999
}

.inputText:focus, select:focus, textarea:focus {
  border-color: #8478a2;
}

.inputText, select, textarea {
  border-style: solid
}

.inputText, .inputText:focus, select, select:focus, textarea, textarea:focus {
  border-width: 1px
}

.editor textarea, .inputText, select, textarea {
  font-family: 'Trebuchet MS', Arial, sans-serif;
}
.mainMenu div.pageMenu a,
.pageNavigation a,
.pageNavigation li.children span{
  color: #555
}

.mainMenu div.pageMenu a:hover,
.pageNavigation a:hover,
.pageNavigation li.children:hover span{
  color: #000
}

.mainMenu div {
  text-align: center;
  margin: 0 auto
}

.subTabMenu ul .activeSubTabMenu a {
  background-color: #444
}

.subTabMenu ul .activeSubTabMenu a:hover {
  background-color: #666
}

.subTabMenu ul .activeSubTabMenu a {
  color: #fff
}

.subTabMenu ul .activeSubTabMenu a:hover {
  color: #fff
}

.subTabMenu ul li a {
  background-color: #666
}

.subTabMenu ul li a:hover {
  background-color: #666
}

.subTabMenu ul .activeSubTabMenu a, .subTabMenu ul li a {
  border-color: #aaa
}

.subTabMenu ul .activeSubTabMenu a:hover, .subTabMenu ul li a:hover {
  border-color: #bbb
}

.subTabMenu ul .activeSubTabMenu a, .subTabMenu ul li a:hover {
  border-style: solid
}

#search .searchContainer p a, .subTabMenu ul li a {
  color: #ddd
}

#search .searchContainer p a:hover, .subTabMenu ul li a:hover {
  color: #fff
}

.message .messageSidebar {
  text-align: center
}

#footer, #header, #main, #mainMenu, #userPanel {
  margin-left: auto;
  margin-right: auto;
}

body, html {
  background-color: #151320
}

body, html {
  background-position: center top
}

body, html {
  background-attachment: scroll
}

body, html {
  background-repeat: no-repeat
}

.iframeBody, body, textarea {
  font-family: 'Trebuchet MS', Arial, sans-serif
}

.formFieldDesc, .light {
  color: #888
}

#footer, #search .searchContainer p a, .boardlistCounter, .boardlistDescription, .boardlistLastPost, .boardlistSubboards, .boardlistUsersOnline, .deleteNote, .editNote, .extraButton span, .firstPost, .formField label, .formFieldDesc, .loginPopup, .messageNumber, .moderators, .optionButtons li span, .pageNavigation, .pageNavigation input, .pmMove p, .pmUsage, .popupMenu, .smallButtons li span, .smallFont, .statusDisplay, .subTabMenu ul li, .tableList th, .userCredits, .userExtras, .userPanel, div.inlineCalendar, td.columnLastActivity, td.columnLocation, td.columnRegistrationDate, td.columnUserAgent {
  font-size: 12px;
  color:#5c7595;
}

.userPanel a, body, legend {
  color: #999
}

.breadCrumbs, .error, .info, .message h3, .message h4, .messageBody, .success, .warning {
  line-height: 1.5
}

.iframeBody, body {
  font-size: .8em
}



.border .container-1 a:active, .border .container-2 a:active, .border .container-3 a:active, .border .containerHead a:active, .userPanel a:active, a:active {
  color: #08f
}


* a.externalURL {
  color: #999
}

* a.externalURL:hover {
  color: #08f
}

h2 {
  font-family: 'Trebuchet MS', Arial, sans-serif
}

h2, h2 a, h2 a:hover {
  color: #333
}

h2 {
  font-size: 1.3em
}

h2 {
  font-weight: bold
}

#header {
  width: 650px
}
#main,#footer,
#userPanel{
  width:480px;

  position: relative;
  left:10px;
  margin-top:60px;
  
}

.activeContainer{
  background-color:rgba(0,0,255,0.2);
}

.activeMessage, .mainMenu div.pageMenu .active a, .markedDayField a, .pageNavigation .active span {
  background-color: #def
}

.activeContainer, .avatarSelect li label:hover, .inlineCalendarTable a:hover, .markedDayField a, .pageNavigation .active {
  border-color: #08f
}

.activeContainer, .avatarDisplay div, .avatarSelect li label, .avatarSelect li label:hover, .inlineCalendarTable a:hover, .markedDayField a, .pageNavigation .active {
  border-style: solid
}

.activeContainer, .avatarDisplay div, .avatarSelect li label, .avatarSelect li label:hover, .inlineCalendarTable a:hover, .markedDayField a, .pageNavigation .active {
  border-width: 1px
}

.activeContainer .light, .activeContainer .light a, .activeContainer a:hover {
  color: #333
}

.mainMenu div.pageMenu .active a, .markedDayField a, .pageNavigation .active span {
  color: #333
}

div.pageMenu li.active a{
  color:#fff;
}

.activeContainer a {
  color: #666
}


.tableHead th{
  font-size:15px;
}

.tableHead a:hover {
  border-color: #999
}


.tableHead a:hover {
  color: #333
}

/* user.additional.style.input2.use */

body {
  background: url(/resources/images/header.jpg) top center no-repeat, url(/resources/images/footer.png) bottom center no-repeat, url(/resources/images/body.jpg) center repeat-y;


}


#header {
  background-color: transparent;
  border: 0;
}

.mainMenuInner {
  position: relative;
}



#searchInput {
  color: #ccc;
  background-color: transparent;
  border: 0;
  outline: 0;
}

#search input.searchSubmit {
  display: none;
}

.userPanelInner {
  text-align: center;
}




#footer, #header, #main, #mainMenu, #userPanel {
  border: 0 !important;
}


.border, .mceResizeBox, .pmEditFolders, .pmUsageBar, .quoteBox, .subTabMenu {
  background-color: transparent !important;
}




#mainMenu.mainMenu {
  background-color: transparent;
}

.userAvatar a .reflected, .userAvatar a canvas {
  max-width: 140px !important;
}

.messageBody .resizeImage {
  max-width: 430px;
}

#top5 .top5.container-2{
  display: none;
}

.quickJump select, .quickJump select:hover {
  background-color: transparent;
  width: auto;
  max-width: 50%;
}

#top5 {
  text-align: center;
}

#shoutboxContent.container-1 p {
  position: relative;
  left: 10px;
  width: calc(100% - 20px);
  word-break:break-all;
  top: 5px;
  margin-bottom:5px;
}

.smileys {
  text-align: center;
  position: relative;
  top: -3px;
}

input#shoutboxMessage.inputText, input#shoutboxSubmit.inputImage {
  position: relative;
  left: 5px;
}

input#shoutboxSubmit.inputImage {
  position: relative;
  top: 2px;
}

#userMenuLogout img {
  box-shadow: none !important;
}

#tplMembersList .subTabMenu .containerHead ul li a {
  text-align: center;
  position: relative;
  border-radius: 20px;
  margin:1px 0;
}
#tplMembersList .subTabMenu .containerHead ul li{
  float:inherit;
  display:inline-block;
}
#tplMembersList .subTabMenu .containerHead{
  width:100%;
  text-align:center;
}


#contact {
  z-index: 10;
  position: relative;
  top: 684px;
  left: 600px;
  width: 0px;
  height: 0px;
}

#nlogin {

  width: 200px;
  position: absolute;
  right: -166px;
  top: 160px;text-align:center;
}

#nlogin a {
  font-size:11px;
  color:#fff;
  text-decoration: none;
}
#nlogin a:hover {
  text-decoration:underline;
}

input#loginUsername.inputUsername,
input#loginPassword.inputPassword{
  background: url(/resources/images/input.png) no-repeat;
  color: #546274;
  font-size:11px;
  height: 39px;
  width: 119px;
  background-color: transparent;
  padding:1px 10px;
  border: 0px;
  margin-bottom:4px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #546274;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #546274;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #546274;
}
:-moz-placeholder { /* Firefox 18- */
  color: #546274;
}



input.loginButton {
  background-repeat: no-repeat!important;
  height: 29px!important;
  width: 112px;
  background-image: url(/resources/images/submit.png)!important;
  background-color: transparent!important;
  border: none!important;
  color: transparent!important;
  margin:4px 0 10px 0;
  padding:0;
  cursor: pointer;
}

input.loginButton:hover {
  background-image: url(/resources/images/submit_hover.png)!important;
}

#download {
  width: 172px;
  height: 153px;
  background: url(/resources/images/download-hover.jpg) no-repeat;
  position: relative;
  top: 0px;
  left: 238px;
  display: block;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#download:hover {
  opacity: 1;
}

#main-nav {
  width:610px;
  height: 70px;
  margin: 0 auto;
}

.containerHead {
  width:780px;
  height:38px;
  margin:20px 0;
  position: relative;
}

.containerHead .boardTitle {
  width:480px;
  background:url('/resources/images/title.jpg') center center no-repeat;
  color:#fff;
  text-align: center;
  font-size:11px;
  line-height:38px;
  margin:0;
  letter-spacing:1px;

}
#boardlist .containerContent .boardTitle {
  margin-left:-80px;
  padding:0 0 0 0px;
  width:calc(100% + 70px)!important;
}
.containerHead h3,
.containerHead h3 a{
  text-align:center;
  color:#fff;
  font-size:18px;
}
.layout-2 .first {
  width: 55% !important;
}

#avatarE {
  text-align: center;
  height: 0px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 90px;
  left: 465px;
}


.userMenu a{
  height:20px;
  line-height:20px;
}
.userMenu img {
  width:16px;
  height:16px;
  position:relative;
  margin-top:-7px;
  margin-right:6px;
}

#avatarE #userNote{
  white-space:inherit;
}
#avatarE #userAvatar{
  height:40px;
  margin-bottom:0px;
  padding:0 35px;
  text-align:left;
}

#avatarE #userAvatar img {
  float:left;
  width:24px!important;
  height:24px!important;
}
#avatarE #userAvatar a {
  float:left;
  margin:4px 5px 0 0px;
}
#avatarE #userMenuLogout{
  list-style-type:none;
}
.copyrightn, #footer {
  text-align: center;
  position: relative;
  z-index:1;
}

.copyrightn {
  color: #52647B;
}

.copyrightn a {
  color: #6C99D2;
}

#copyrightb {
  text-align: center;
}

#copyrightb a {
  color: #6C99D2;
  text-align: center;
  text-decoration: none;
}

#copyrightb a:hover {
  color: white;
  text-align: center;
  text-decoration: none;
}

#footerMenu, #footerOptions, .copyright, #copyrightb {
  position: relative;
  top: -5px;
}

.formElement .formField {
  margin-left: 0px !important;
}


#main-nav {
  position: relative;
}

.mainMenu .mainMenuInner {
  width: 672px;
  padding: 4px 0px 4px 25px;
  display:block;
  float: left;
}

.mainMenu .mainMenuInner ul {
  margin: 0;
}

.mainMenu .mainMenuInner ul li {
  width: 112px;
  height: 62px;
  float:left;
  background: url('/resources/images/bg-nav.jpg');
}

.mainMenu .mainMenuInner ul li a {
  color: transparent !important;
  background: url('/resources/images/bg-nav.jpg');
  width: 112px;
  height: 62px;
  display: block;
  outline:none!important;
  float:left;
  opacity:0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.mainMenu .mainMenuInner ul li a:hover,
.mainMenu .mainMenuInner ul li.active a {
  opacity:1;
}

.mainMenu .mainMenuInner ul li.item-7  {
  background-position:0px 0px;
}
.mainMenu .mainMenuInner ul li.item-7 a {
  background-position:0px -62px;
}
.mainMenu .mainMenuInner ul li.item-3  {
  background-position:-112px 0px;
}
.mainMenu .mainMenuInner ul li.item-3 a {
  background-position:-112px -62px;
}
.mainMenu .mainMenuInner ul li.item-2  {
  background-position:-224px 0px;
}
.mainMenu .mainMenuInner ul li.item-2 a {
  background-position:-224px -62px;
}
.mainMenu .mainMenuInner ul li.item-8  {
  background-position:-336px 0px;
}
.mainMenu .mainMenuInner ul li.item-8 a {
  background-position:-336px -62px;
}
.mainMenu .mainMenuInner ul li.item-9  {
  background-position:-448px 0px;
}
.mainMenu .mainMenuInner ul li.item-9 a {
  background-position:-448px -62px;
}
.mainMenu .mainMenuInner ul li.item-10  {
  background-position:-560px 0px;
}
.mainMenu .mainMenuInner ul li.item-10 a {
  background-position:-560px -62px;
}
#changeLanguageMenu {
  position:relative;
  z-index:99999
}
#social {
  width: 36px;
  height: auto;
  position: absolute;
  top: 130px;
  left: -150px;
}
#social img {
  margin-bottom:7px;
}
#social h2 {
  font-family: 'Overlock', cursive;
  font-size:10px;
  color:#7fb6f4;
  margin:0;
  font-weight:400;
  margin-bottom:5px;
margin-top:5px;
}
#social h3 {
  font-family: 'Overlock', cursive;
  font-size:9px;
  text-transform: uppercase;
  color:#7fb6f4;
  margin:0;
  font-weight:400;
  margin-bottom:10px;
}

#search {
  width: 203px;
  padding-left:40px;
  padding-top:18px;
  display:block;
  float: right
}
#search #searchInput{
  color:#4f6987;
}

#searchInputMenu a {
  color:#4f6987;
}
#searchInputMenu a:hover {
  color:#99c5ff
}

#shoutboxContent.container-1 .light {
  color: #ccc !important;
}

#tplAvatarEdit .contentBox .buttonBar .smallButtons ul li {
  position: relative;
  left: -30px;
}

.formFieldLabel {
  text-align: left;
  float: none;
}

fieldset .formElement .formFieldDesc {
  margin-left: 0px !important;
}

.iframeBody {
  position: relative;
  top: 10px;
  left: 10px;
}




.normalColor a,
.normalColor{
  color:#5c7595;
}
.lightenColor{
  color:#99c5ff;
}
.text-center{
  text-align:center;
}
#toTopLink,
.footerOptionsInner ul li em img,
.boardlistLastPost,
.titleBarPanel .containerHead .containerIcon,
.infoBoxSorting .containerIcon,
.pageOptions a img,
.infoBoxStatistics .containerIcon{
  display:none;
}
#threadEditMarkedLink img{
  vertical-align:text-bottom;
}
.infoBoxSorting h3,
.infoBoxStatistics h3{
  font-size:16px;
}
.infoBoxSorting form{
  margin:10px 0;
}
.infoBoxSorting form label{
  font-size:13px;
}

input[type=text],
input[type=email],
input[type=phone],
input[type=password],
select,
input[type=submit],
input[type=reset],
input[type=button]{
  background:rgba(0,0,0,0.5);
  color:#907f93;
  height:25px;
  font-size:12px;
  border:1px solid;
  border-top-color:#645872;
  border-bottom-color:#3e2d49;
  border-left-color:#3d3a40;
  border-right-color:#3d3a40;
  outline:none;
  padding:3px 5px;
}
textarea,
.mceEditorIframe,
.editor textarea{
  background:rgba(0,0,0,0.5);
  color:#907f93;
  font-size:12px;
  border:1px solid;
  border-top-color:#645872;
  border-bottom-color:#3e2d49;
  border-left-color:#3d3a40;
  border-right-color:#3d3a40;
  outline:none;
}
input[type=text],
input[type=email],
input[type=phone],
input[type=password],
select,
textarea,
.mceEditorIframe,
.editor textarea,
.longSelect select{
  padding:3px 5px;
  width:calc(100% - 12px);
}
.inputImage{
  border-radius:100%;
  vertical-align:top;
}
.quickJump{
  padding:4px;
}
input[type=checkbox]{
  vertical-align:top;
}
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover{
  border-color:#8478a2;
  color:#8478a2;
  cursor:pointer;
}
option{
  background:#fff;
}
.profileSidebar .containerHead{
  width:100%;
  height:auto;
  margin: 10px 0 20px 0;
}
.profileSidebar .contentBox .border{
  padding:10px;
}
#tplUserProfile .container-1 .containerContent,
#tplUserProfile .container-2 .containerContent{
  padding-left:30px;
}
.messageInner,
.message .dividers .messageAuthor,
.message .dividers .userCredits,
.message .messageLeft.dividers .userMessenger, .message .messageRight.dividers .userMessenger, .message .messageFramedLeft.dividers .userMessenger, .message .messageFramedRight.dividers .userMessenger,
.message .messageLeft.dividers .userSymbols, .message .messageRight.dividers .userSymbols, .message .messageFramedLeft.dividers .userSymbols, .message .messageFramedRight.dividers .userSymbols,
.message .messageLeft .messageContent,
.message .messageHeader,
.message .messageFooter, .message .messageFooterLeft, .message .messageFooterRight,
.itemList h3.itemListTitle, .itemList h4.itemListTitle, .itemList h5.itemListTitle,
.message .dividers .userAvatar{
  border-color:#202138;
}
.thankStats span,
.expanderContainer span{
  vertical-align:middle;
}
.userRankMembersList{
  text-align:center;
}
#tplMembersList .subTabMenu{
  padding:5px;
  border:1px solid #202138;
  border-bottom:none;
}
.membersList td.columnUsername .smallFont{
  text-align:center;
}
#tplUserMemoEdit .subTabMenu .containerHead{
  width:100%;
}
#tplUserProfileEdit #mainContainer .subTabMenu{
  border: 1px solid #202138;
  border-bottom:none;
}
#tplUserProfileEdit #mainContainer .subTabMenu .containerHead{
  padding:10px;
}
#tplPostReport .formFieldDesc{
  width:100%;
  margin:10px 0;
}
#footerContainer{
  position:relative;
  min-height:450px;
}
img {
  max-width:100%;
}
.pmFolders .pageMenu ul li a span{
  display:inline-block;
  vertical-align:middle;
}
.pmMessagesSortImg{
  margin-top:7px!important;
}
.pmMessages .tableList .columnTitle p a{
  color:#5c7595;
}
.pmMessages .tableList .columnTitle.new p a{
  color:#99c5ff;
}
.userMenu{
  list-style-type:none;
  text-align:left;
  padding:0 35px;
  margin:0;
}

hr { 
    background: url('/resources/images/line.png') no-repeat top center;
    background-size: contain;
    display: block;
    height: 15px;
    border: 0;

}



#main > .newsItem {
	position: relative;
	margin: 35px 30px 0px 0px;
	background-color: #1e1e1e;
	padding: 10px;
	border-radius: 5px;
}
#main > .newsItem .title {
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 1px solid #969696;
}
#main > .newsItem .title a {
	color: #333;
}
#main > .newsItem .title a:hover {
	color: #F00;
}
#main > .newsItem .content {
	font-size: 14px;
	line-height: 24px;
}
#main > .newsItem .more {
	position: absolute;
	right: 5px;
	bottom: 3px;
}
#main > .newsItem .more a {
	color: #333;
	font-family: Tahoma;
	font-size: 10px;
}
#main > .newsItem .more a:hover {
	color: #F00;
}

#side-statistics {

  width: 200px;
  position: absolute;
  right: -1665px;
  top: 500px;text-align:center;
}

#side-statistics a {
  font-size:11px;
  color:#fff;
  text-decoration: none;
}
#side-statistics a:hover {
  text-decoration:underline;
}

div#side-statistics {
  position: absolute;
  width: 145px;
  height: 255px;
  top: 550px;
  left: 610px;
  right: 0;
  margin: 0 auto;
  text-align: right;
  font-size: 12px;
  text-transform: uppercase;
  color: #99c5ff;
  letter-spacing: 0.02em;}

#side-statistics h2 {
  color: #fff;
  font-size: 16px;
  text-align: right;
}

div#side-statistics hr {
  border: none;
  
  height: 2px;
  width: 144px;
}
.inner-stats {padding-right: 15px;margin-top: 29px;}



#DCS-top {

  width: 200px;
  position: absolute;
  right: -1665px;
  top: 500px;text-align:center;
}

#DCS-top a {
  font-size:11px;
  color:#fff;
  text-decoration: none;
}
#DCS-top a:hover {
  text-decoration:underline;
}

div#DCS-top {
  position: absolute;
  width: 120px;
  height: 50px;
  top: -7px;
  left: 620px;
  right: 0;
  margin: 0 auto;
  text-align: right;
  font-size: 12px;
  color: #99c5ff;
  letter-spacing: 0.02em;}

#DCS-top h2 {
  color: #ffff00;
  font-size: 11px;
  text-align: right;
}

div#DCS-top hr {
  border: none;
  
  height: 2px;
  width: 144px;
}
.DCS-top-stats {padding-right: 15px;margin-top: 29px;}

#MCS-top {

  width: 200px;
  position: absolute;
  right: -1665px;
  top: 500px;text-align:center;
}

#MCS-top a {
  font-size:11px;
  color:#fff;
  text-decoration: none;
}
#MCS-top a:hover {
  text-decoration:underline;
}

div#MCS-top {
  position: absolute;
  width: 120px;
  height: 50px;
  top: -7px;
  left: -740px;
  right: 0;
  margin: 0 auto;
  text-align: left;
  font-size: 12px;
  color: #99c5ff;
  letter-spacing: 0.02em;}

#MCS-top h2 {
  color: #ff0000;
  font-size: 11px;
  text-align: left;
}

div#MCS-top hr {
  border: none;
  
  height: 2px;
  width: 144px;
}
.MCS-top-stats {padding-right: 15px;margin-top: 29px;}




#logo {
  width: 650px;
  height: 192px;
  padding: 0;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

#logo:after {
  
  width: 650px;
  height: 200px;
  content: ' ';
  position: absolute;
  display: block;
  left: 0;
  top: 0;

}

#logo h1 a, #logo a img {
    top: 60px;
  left: 175px;
  right: 0;
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

#logo a.pageLogo, #logo h1.pageTitle {
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;

}

#logo h1.pageTitle a {
  display: block;
  position: relative;
  height: 100%;
  z-index: 20;
}

#side-status {

  width: 200px;
  position: absolute;
  right: -1665px;
  top: 500px;text-align:center;
}

#side-status a {
  font-size:11px;
  color:#fff;
  text-decoration: none;
}
#side-status a:hover {
  text-decoration:underline;
}

div#side-status {
  position: absolute;
  width: 145px;
  height: 255px;
  top: 550px;
  left: -650px;
  right: 0;
  margin: 0 auto;
  text-align: left;
  text-indent:-20px;
  font-size: 10px;
  text-transform: uppercase;
  color: #99c5ff;
  letter-spacing: 0.02em;}

#side-status h2 {
  color: #99c5ff;
  font-size: 12px;
  text-align: left;
  height: 16px;
}

div#side-status hr {
  border: none;
  
  height: 0.10000055550000005px;
}
.inner-status {padding-right: 15px;margin-top: 29px;}

#snow{
  background: none;
  font-family: Androgyne;
  background-image: url('/resources/images/snow1.png'), url('/resources/images/snow2.png'), url('/resources/images/snow3.png');
  left: 0;
  position: fixed;
  height:100%;
  pointer-events: none;

  width: 100%;
  z-index:1;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
}

@keyframes snow { 
0% { background-position: 500px 0px, 120px 0px, -100px 0px; } 
10% { background-position: 500px 100px, 120px 40px, -100px 30px; } 
20% { background-position: 500px 200px, 120px 80px, -100px 60px; } 
30% { background-position: 500px 300px, 120px 120px, -100px 90px; } 
40% { background-position: 500px 400px, 120px 160px, -100px 120px; } 
50% { background-position: 500px 500px, 120px 200px, -100px 150px; } 
60% { background-position: 500px 600px, 120px 240px, -100px 180px; } 
70% { background-position: 500px 700px, 120px 280px, -100px 210px; } 
80% { background-position: 500px 800px, 120px 320px, -100px 240px; } 
90% { background-position: 500px 900px, 120px 360px, -100px 270px; } 
100% { background-position: 500px 1000px, 120px 400px, -100px 300px; } 
}

@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
} 
 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}