Update design

Update design

@themeColor: <%themeColor%>;
@wallpaperUrl: <%wallpaperUrl%>;
@headerImageUrl: <%headerImageUrl%>;
@headerBlurImageUrl: <%headerBlurImageUrl%>;

html, body {
	height: 100%;
}

html {
	color: #000;
	background-color: #fff;
	background-image: url(@wallpaperUrl);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

main {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	box-shadow: 1px 0 4px rgba(0, 0, 0, 0.5);

	> header {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;

		> #headerMain {
			position: relative;
			width: 100%;
			height: 350px;
			// Background Image
			background-image: url(@headerImageUrl);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;

			> #headerUserMenu {
				position: absolute;
				top: 0;
				right: 0;
				padding: 16px;

				> ul {
					margin: 0;
					padding: 0;
					list-style: none;

					li {
						display: inline-block;
						color: #fff;
						text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

						a {
							display: inline-block;
							color: #fff;
						}

						button {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: inline-block;
							padding: 0;
							background: transparent;
							border: none;
							outline: none;
							cursor: pointer;
							color: #fff;
						}

						i {
							padding: 8px 16px;
							font-size: 2em;
							color: #fff;

							&:hover {
								color: @themeColor;
							}
						}
					}
				}
			}

			> #headerUserArea {
				display: block;
				box-sizing: border-box;
				position: relative;
				width: 300px;
				height: 100%;
				overflow: hidden;
				margin: 0;
				padding: 8px;
				text-align: center;
				color: #fff;
				text-shadow: 0 0 16px rgba(0,0,0,0.7);

				> #headerUserAreaBackground {
					position: absolute;
					top: 0;
					left: 0;
					width: 1000px;
					height: 350px;
					background-image: url(@headerBlurImageUrl);
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;
				}

				> #headerUserAreaMain {
					position: relative;

					#icon {
						display: block;
						width: 160px;
						height: 160px;
						max-width: 160px;
						max-height: 160px;
						margin: 0 auto;
						padding: 0;
						border-radius: 80px;
						transition: all .2s ease;

						&:hover {
							border-radius: 0;
							filter: saturate(200%);
							-webkit-filter: saturate(200%);
							-moz-filter: saturate(200%);
							-o-filter: saturate(200%);
							-ms-filter: saturate(200%);
							transform: scale(1.2) rotateZ(10deg);
						}
					}

					h1 {
						margin: 8px 0;
						padding: 0;
						font-size: 1em;
						font-weight: normal;
						color: #fff;
						text-shadow: 0 0 16px rgba(0, 0, 0, 0.7);

						#name {
							display: block;
							font-size: 2em;
							color: #fff;
						}

						#screenName {
							display: block;
							margin: 0 4px;
							font-size: 0.8em;
							color: rgba(255, 255, 255, 0.7);
						}
					}
				}
			}
		}

		> nav {
			display: block;
			box-sizing: border-box;
			position: relative;
			width: 100%;
			margin: 0;
			padding: 4px 0;
			background: #fff;
			box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);

			> #headerNavBackground {
				/*
				position: absolute;
				bottom: 0;
				left: 0;
				width: 1000px;
				height: 400px;
				background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(@headerBlurImageUrl);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				clip: rect(400px, 1000px, 1000px, 0px);
				*/
			}

			> #headerNavMain {
				position: relative;

				table {
					padding: 0 64px;

					tr {
						th, td {
							min-width: 4em;
							padding: 0;
							margin: 0;
						}

						th {
							text-align: left;
							font-size: 0.8em;
							font-weight: normal;
							color: rgba(0, 0, 0, 0.5);
						}

						td {
							font-size: 1.5em;
						}
					}
				}

				> #friendStatus {
					position: absolute;
					top: 0;
					right: 0;
					margin: 0;
					padding: 12px 33px;
					color: rgba(0, 0, 0, 0.7);
				}

				> #followButton {
					position: absolute;
					top: -100%;
					right: 16px;
					margin: 0;
				}
			}
		}
	}
}

#contents {
	/*border-top: solid 3px @themeColor;*/
	&:after {
		content: "";
		display: block;
		clear: both;
	}

	#contentsLeft {
		float: left;
		width: 60%;

		#mainContent {
			padding: 32px 64px;
		}
	}

	#contentsRight {
		float: left;
		width: 40%;

		#timeline {
			max-height: 500px;
			overflow: scroll;
		}
	}
}

#bio {
	font-size: 1.3em;
}

.usersList {
	ol {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			padding: 16px 0;

			&:after {
				content: "";
				display: block;
				clear: both;
			}

			a > .icon {
				float: left;
				min-width: 54px;
				min-height: 54px;
				max-width: 54px;
				max-height: 54px;
				margin: 0 12px 4px 0;
				border-radius: 8px;
				transition: all 0.1s ease;
			}

			> h2 {
				text-align: left;
				display: inline;
				margin: 0;
				padding: 0;
				font-weight: normal;
				font-size: 1em;

				> a {
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					text-decoration: none;
					transition: all 0.1s ease;
				}

				> .screenName {
					text-align: left;
					margin: 0 0 0 8px;
					color: rgba(0, 0, 0, 0.5);
				}
			}

			> .comment {
				display: block;
				margin: 0 0 0 0;
				padding: 0;
				overflow: hidden;
				word-wrap: break-word;
				font-size: 1.1em;
				color: rgba(0, 0, 0, 0.8);
			}
		}
	}
}

@themeColor: <%themeColor%>;
@wallpaperUrl: <%wallpaperUrl%>;
@headerImageUrl: <%headerImageUrl%>;
@headerBlurImageUrl: <%headerBlurImageUrl%>;

html, body {
	height: 100%;
}

html {
	color: #000;
	background-color: #fff;
	background-image: url(@wallpaperUrl);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

main {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	box-shadow: 1px 0 4px rgba(0, 0, 0, 0.5);

	> header {
		display: block;
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;

		> #headerMain {
			position: relative;
			width: 100%;
			height: 350px;
			// Background Image
			background-image: url(@headerImageUrl);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;

			> #headerUserMenu {
				position: absolute;
				top: 0;
				right: 0;
				padding: 16px;

				> ul {
					margin: 0;
					padding: 0;
					list-style: none;

					li {
						display: inline-block;
						color: #fff;
						text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

						a {
							display: inline-block;
							color: #fff;
						}

						button {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: inline-block;
							padding: 0;
							background: transparent;
							border: none;
							outline: none;
							cursor: pointer;
							color: #fff;
						}

						i {
							padding: 8px 16px;
							font-size: 2em;
							color: #fff;

							&:hover {
								color: @themeColor;
							}
						}
					}
				}
			}

			> #headerUserArea {
				display: block;
				box-sizing: border-box;
				position: relative;
				width: 300px;
				height: 100%;
				overflow: hidden;
				margin: 0;
				padding: 8px;
				text-align: center;
				color: #fff;
				text-shadow: 0 0 16px rgba(0,0,0,0.7);

				> #headerUserAreaBackground {
					position: absolute;
					top: 0;
					left: 0;
					width: 1000px;
					height: 350px;
					background-image: url(@headerBlurImageUrl);
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;
				}

				> #headerUserAreaMain {
					position: relative;

					#icon {
						display: block;
						width: 160px;
						height: 160px;
						max-width: 160px;
						max-height: 160px;
						margin: 0 auto;
						padding: 0;
						border-radius: 80px;
						transition: all .2s ease;

						&:hover {
							border-radius: 0;
							filter: saturate(200%);
							-webkit-filter: saturate(200%);
							-moz-filter: saturate(200%);
							-o-filter: saturate(200%);
							-ms-filter: saturate(200%);
							transform: scale(1.2) rotateZ(10deg);
						}
					}

					h1 {
						margin: 8px 0;
						padding: 0;
						font-size: 1em;
						font-weight: normal;
						color: #fff;
						text-shadow: 0 0 16px rgba(0, 0, 0, 0.7);

						#name {
							display: block;
							font-size: 2em;
							color: #fff;
						}

						#screenName {
							display: block;
							margin: 0 4px;
							font-size: 0.8em;
							color: rgba(255, 255, 255, 0.7);
						}
					}
				}
			}
		}

		> nav {
			display: block;
			box-sizing: border-box;
			position: relative;
			width: 100%;
			margin: 0;
			padding: 0;
			background: #fff;
			/*box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);*/
			> #headerNavBackground {
				/*
				position: absolute;
				bottom: 0;
				left: 0;
				width: 1000px;
				height: 400px;
				background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(@headerBlurImageUrl);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				clip: rect(400px, 1000px, 1000px, 0px);
				*/
			}

			> #headerNavMain {
				position: relative;

				table {
					padding: 0 64px;

					tr {
						th, td {
							min-width: 4em;
						}

						th {
							text-align: left;
							font-size: 0.8em;
							font-weight: normal;
							color: rgba(0, 0, 0, 0.5);
						}

						td {
							font-size: 1.5em;
						}
					}
				}

				> #friendStatus {
					position: absolute;
					top: 0;
					right: 0;
					margin: 0;
					padding: 12px 33px;
					color: rgba(0, 0, 0, 0.7);
				}

				> #followButton {
					position: absolute;
					top: -100%;
					right: 16px;
					margin: 0;
				}
			}
		}
	}
}

#contents {
	border-top: solid 3px @themeColor;

	&:after {
		content: "";
		display: block;
		clear: both;
	}

	#contentsLeft {
		float: left;
		width: 60%;

		#mainContent {
			padding: 32px 64px;
		}
	}

	#contentsRight {
		float: left;
		width: 40%;

		#timeline {
			max-height: 500px;
			overflow: scroll;
		}
	}
}

#bio {
	font-size: 1.3em;
}

.usersList {
	ol {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			padding: 16px 0;

			&:after {
				content: "";
				display: block;
				clear: both;
			}

			a > .icon {
				float: left;
				min-width: 54px;
				min-height: 54px;
				max-width: 54px;
				max-height: 54px;
				margin: 0 12px 4px 0;
				border-radius: 8px;
				transition: all 0.1s ease;
			}

			> h2 {
				text-align: left;
				display: inline;
				margin: 0;
				padding: 0;
				font-weight: normal;
				font-size: 1em;

				> a {
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					text-decoration: none;
					transition: all 0.1s ease;
				}

				> .screenName {
					text-align: left;
					margin: 0 0 0 8px;
					color: rgba(0, 0, 0, 0.5);
				}
			}

			> .comment {
				display: block;
				margin: 0 0 0 0;
				padding: 0;
				overflow: hidden;
				word-wrap: break-word;
				font-size: 1.1em;
				color: rgba(0, 0, 0, 0.8);
			}
		}
	}
}


[SSE] fix bug 50289

[SSE] fix bug 50289

.combo-arrow-style {
    .form-control {
        cursor: pointer;
        background-color: white;

        &.image {
            .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
            background-repeat: no-repeat;
            background-position: 10px 0;
            background-attachment: scroll;
            background-color: white;
        }
    }

    .btn {
        &:active:not(.disabled),
        &.active:not(.disabled){
            .caret {
                background-position: @arrow-small-offset-x @arrow-small-offset-y;
            }
        }
    }
}

.item-arrow {
    .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
    width:44px;
    height:20px;
}

.advanced-settings-dlg {
    .div-category {
        padding: 0 15px;
        text-align: right;
        font-weight: bold;
        font-size: 11px;
    }

    .range-tableview {
        .list-item > div{
            vertical-align: middle;
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: pre;
        }

        .listitem-icon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .selected {
            .listitem-icon {
                background-position-x: -20px;
                background-position-x: @button-small-active-icon-offset-x;
            }
        }

        .lock-user {
            position: absolute;
            right: 2px;
            min-width: 100px;
            max-width: 150px;
            height: 20px;
            padding: 2px 10px;
            background-color: #EE3525;
            color: #fff;
            text-align: center;
        }
    }

    .header-sorted {
        label, div, span {
            display: inline-block;
            cursor: pointer;
        }
        .sort-direction {
            width: 7px;
            height: 7px;
            vertical-align: middle;
            border: 0;
            background-position: -85px -97px;
        }
        .sort-desc {
            background-position: -85px -104px;
        }
    }
}

#sort-dialog-btn-down {
    margin-right: 5px;
}

.sort-dialog-btn-text {
    min-width: 100px;
    margin-right: 5px;
}

.input-row--tabs {
    border-bottom: @scaled-one-px-value-ie solid @border-divider-ie;
    border-bottom: @scaled-one-px-value solid @border-divider;
}

.preview-canvas-container {
    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
    border: @scaled-one-px-value solid @border-regular-control;
}

.combo-arrow-style {
    .form-control {
        cursor: pointer;
        background-color: white;

        &.image {
            .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
            background-repeat: no-repeat;
            background-position: 10px 0;
            background-attachment: scroll;
            background-color: white;
        }
    }

    .btn {
        &:active:not(.disabled),
        &.active:not(.disabled){
            .caret {
                background-position: @arrow-small-offset-x @arrow-small-offset-y;
            }
        }
    }
}

.item-arrow {
    .background-ximage('@{common-image-path}/right-panels/Begin-EndStyle.png', '@{common-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
    width:44px;
    height:20px;
}

.advanced-settings-dlg {
    .div-category {
        padding: 0 15px;
        text-align: right;
        font-weight: bold;
        font-size: 11px;
    }

    .range-tableview {
        .list-item > div{
            vertical-align: middle;
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: pre;
        }

        .listitem-icon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .selected {
            .listitem-icon {
                background-position-x: 0;
                background-position-x: @button-small-normal-icon-offset-x;
            }
        }

        .lock-user {
            position: absolute;
            right: 2px;
            min-width: 100px;
            max-width: 150px;
            height: 20px;
            padding: 2px 10px;
            background-color: #EE3525;
            color: #fff;
            text-align: center;
        }
    }

    .header-sorted {
        label, div, span {
            display: inline-block;
            cursor: pointer;
        }
        .sort-direction {
            width: 7px;
            height: 7px;
            vertical-align: middle;
            border: 0;
            background-position: -85px -97px;
        }
        .sort-desc {
            background-position: -85px -104px;
        }
    }
}

#sort-dialog-btn-down {
    margin-right: 5px;
}

.sort-dialog-btn-text {
    min-width: 100px;
    margin-right: 5px;
}

.input-row--tabs {
    border-bottom: @scaled-one-px-value-ie solid @border-divider-ie;
    border-bottom: @scaled-one-px-value solid @border-divider;
}

.preview-canvas-container {
    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
    border: @scaled-one-px-value solid @border-regular-control;
}


no message

no message

.accordion .config .df-fieldset {
	input.df-number {
		text-align: center; width: 4em;
		& + label.addafter {display: inline-block; padding-left: 0.2em;}
	}
}

.accordion .config .df-fieldset {
	input.df-number {
		width: 4em;
		text-align: center;
		& + label.addafter {
			display: inline-block;
			padding-left: 0.2em;
		}
	}
}


Delete core.less

Delete core.less

// Base Class Definition
// -------------------------

.@{fa-css-prefix} {
  display: inline-block;
  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}


Stupid simple refactor using extract function.

.ratio(@prop; @value; @ratio) {
  @n: extract(@ratio, 1);
  @of: extract(@ratio, 3);
  @{prop}: (@value * @n / @of);
}


fix: Prevent tooltip text selection on zoom evnet #504

@import 'prefixer';

@axis-color: #000;
@chart-padding: 10px;
@legend-rect-width: 12px;
@hidden-padding: 1px;

.user-select() {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.tui-chart {
  position: relative;
  &, * {
    .border-box();
    line-height: 1;
  }
  .tui-chart-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    z-index: 350;
  }

  .tui-chart-axis-area {
    z-index: 300;
    position: absolute;
    * {
      .user-select();
    }
    .tui-chart-title-area {
      position: absolute;
    }

    .tui-chart-tick-area, .tui-chart-label-area {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .tui-chart-tick-area {
      .tui-chart-tick {
        position: absolute;
        background-color: @axis-color;
      }
    }

    .tui-chart-label-area {
      .tui-chart-label {
        position: absolute;
        > span {
          line-height: 1.2;
        }
      }
    }

    &.vertical {
      top: @chart-padding;

      .tui-chart-title-area {
        text-align: center;
        white-space: nowrap;
        top: 0;
        &.rotation {
          .transform-origin(top left);
          .rotate(-90deg);
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
      }

      .tui-chart-tick-area {
        right: 0;
        .tui-chart-tick {
          right: 1px;
          width: 5px;
          height: 1px;
        }

        .tui-chart-tick-line {
          left: auto;
          right: 0;
          width: 1px;
          background-color: @axis-color;
          position: absolute;
        }
      }

      .tui-chart-label-area {
        right: 10px;
        .tui-chart-label {
          left: 0;
          width: 100%;
          text-align: right;
          white-space: nowrap;
        }
      }

      &.right {
        .tui-chart-title-area {
          text-align: center;
          white-space: nowrap;
          top: 0;
          &.rotation {
            .transform-origin(top left);
            .rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
          }
        }

        .tui-chart-tick-area, .tui-chart-label-area {
          left: 0;
        }

        .tui-chart-label-area {
          .tui-chart-label {
            text-align: left;
            padding-right: 0;
            padding-left: 10px;
          }
        }
      }

      &.center {
        .tui-chart-title-area {
          width: 100% !important;
          .rotate(0deg);
          filter: none;
          top: auto;
        }

        .tui-chart-label-area {
          left: 0;
          width: 100% !important;
          .tui-chart-label {
            text-align: center;
          }
        }
      }

      &.right .tui-chart-tick-area, &.center .tui-chart-tick-area.opposite-side{
        border-right: none;
        .tui-chart-tick {
          left: 1px;
        }

        .tui-chart-tick-line {
          right: auto;
          left: 0;
        }
      }
    }

    &.horizontal {
      right: @chart-padding;

      .tui-chart-title-area {
        bottom: 0;
        width: 100%;
        text-align: center;
      }

      &.division {
        .tui-chart-title-area {
          left: 0;
          width: auto;
        }

        .tui-chart-title-area.right {
          left: auto;
          right: 0;
        }
      }

      .tui-chart-tick-area, .tui-chart-label-area {
        left: 0;
      }

      .tui-chart-tick-area {
        .tui-chart-tick-line {
          top: 0;
          height: 1px;
          background-color: @axis-color;
          position: absolute;
        }
        .tui-chart-ticks {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .tui-chart-tick {
          top: 0;
          width: 1px;
          height: 6px;
        }
      }

      .tui-chart-label-area {
        .tui-chart-label {
          top: 10px;
          text-align: center;
          word-wrap: break-word;
          word-break: keep-all;
          &.tui-chart-xaxis-rotation {
            text-align: right;
            span {
              position: absolute;
              right: 0;
              top: 0;
            }
            white-space: nowrap;
          }

          &.tui-chart-xaxis-rotation25 {
            .rotate(-25deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9063077870366499, M12=0.42261826174069944, M21=-0.42261826174069944, M22=0.9063077870366499)";
            }
          }
          &.tui-chart-xaxis-rotation45 {
            .rotate(-45deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";
            }
          }
          &.tui-chart-xaxis-rotation65 {
            .rotate(-65deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.42261826174069944, M12=0.9063077870366499, M21=-0.9063077870366499, M22=0.42261826174069944)";
            }
          }
          &.tui-chart-xaxis-rotation85 {
            .rotate(-85deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.08715574274765814, M12=0.9961946980917455, M21=-0.9961946980917455, M22=0.08715574274765814)";
            }
          }
        }
      }
    }
  }

  .tui-chart-plot-area {
    position: absolute;
    right: @chart-padding;
    top: @chart-padding;
    z-index: -100;

    .tui-chart-plot-optional-lines-area {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .tui-chart-plot-lines-area {
      width: 100%;
      height: 100%;
      position:relative;
    }
    .tui-chart-plot-line {
      background-color: #ccc;
      position: absolute;
      &.vertical {
        top: 0px;
        width: 1px;
      }

      &.horizontal {
        left: 0px;
        height: 1px;
      }
    }
  }

  .tui-chart-series-area {
    z-index: 200;
    position: absolute;
    &:first-child {
      overflow: visible;
    }
    .user-select();

    .tui-chart-series-block-area {
      position: absolute;
      left: 10px;
      top: 10px;
      .tui-chart-series-block {
        position: absolute;
      }
    }

    .tui-chart-series-label-area {
      position: absolute;
      overflow: visible;
      left: 0px;
      top: 0px;
      display: none;
      .opacity(0);
      .tui-chart-series-label {
        position: absolute;
        cursor: default;
        text-align: center;
        white-space: nowrap;
        .text-shadow(#fff 0px 0px 3px);
      }
      &.show {
        display: block;
      }

      &.opacity {
        .opacity(1);
      }
    }

    .tui-chart-series-graph-area {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .tui-chart-zoom-area {
    z-index: 1500;
    position: absolute;
    border: 1px solid #cccccc;
    background-color: #cccccc;
    .border-radius(4px);
    > .tui-chart-zoom-btn {
      width: 21px;
      height: 21px;
      display: block;
      background-color: #fff;
      cursor: pointer;
      position: relative;
      &:first-child {
        margin-bottom: 1px;
        .border-radius(4px 4px 0 0);
      }
      &:last-child {
        .border-radius(0 0 4px 4px);
      }
      &:hover {
        background-color: #efefef;
      }
      > div {
        font-szie: 0;
        background-color: #555555;
        position: absolute;
        &.horizontal-line {
          width:9px;
          height: 1px;
          left: 6px;
          top: 10px;
        }
        &.vertical-line {
          width:1px;
          height: 9px;
          left: 10px;
          top: 6px;
        }
      }
    }
  }

  .tui-chart-series-custom-event-area {
    z-index: 1000;
    position: absolute;
    left: 0;
    top: 0;
    background-color:rgba(0, 0, 0, 0);

    &.hide {
      display: none;
    }

    &.drag {
      cursor: move;
    }

    .tui-chart-drag-selection {
      top: 10px;
      height: 100%;
      background-color: gray;
      .opacity(0.3);
      position: absolute;
      display: none;
      &.show {
        display: block;
      }
    }

    .tui-chart-reset-zoom-btn {
      position:absolute;
      left: 20px;
      top: 20px;
      font-size: 11px;
      padding: 5px;
      border: 1px solid #ccc;
      background-color: #efefef;
      cursor: pointer;
      .user-select();
    }
  }

  .tui-chart-legend-rect {
    margin-top: 2px;
    width: @legend-rect-width;
    height: @legend-rect-width;
    &.line {
      height: 2px;
    }
    &.area, &.bubble {
      .opacity(0.5);
    }
  }
  .tui-chart-chartExportMenu-area {
    z-index: 900;
    position: absolute;
    font-family: Verdana;
    margin: 0;
    padding: 0;
    .tui-chart-chartExportMenu-button{
      position: absolute;
      right :0;
      background-color: #fff;
      border: 1px solid #000;
      font-size: 12px;
      padding: 3px 5px;
      margin: 0;
      cursor: pointer;
    }
    ul {
      display: none;
      position: absolute;
      top: 20px;
      right: 0;
      width: 100px;
      background: #fafaff;
      border: 1px solid #000;
      font-size: 0.8em;
      padding: 0;
      margin: 0;
        > li {
          margin: 0;
          padding: 7px 3px;
          border-right: 0.5px solid #000;
          border-bottom: 0.5px solid #000;
          border-collapse: collapse;
          text-align: center;
          list-style-type: none;
          line-height: 1;
          cursor: pointer;
        }
    }
  }
  .tui-chart-legend-area {
    z-index: 400;
    position: absolute;
    padding: 10px;
    .user-select();
    .tui-chart-legend {
      clear: both;
      > div {
        float: left;
      }

      .tui-chart-legend-checkbox-area {
        width: 20px;
        height: 20px;
        position: relative;
        input {
          left: 2px;
          top: 2px;
          *left: -2px;
          *top: -2px;
          position: absolute;
          padding: 0;
          margin: 0;
        }
        .border-box();
      }

      .tui-chart-legend-label {
        padding: 2px 0 2px 4px;
        cursor: pointer;
        .content-box();
        line-height: 1;
      }

      &.unselected {
        .tui-chart-legend-rect {
          .opacity(0.3);
        }

        .tui-chart-legend-label {
          .opacity(0.3);
        }
      }
    }

    .tui-chart-legend-tick-area {
      position:absolute;
      left: 10px;
      top: 10px;
      .tui-chart-map-legend-tick {
        width: 15px;
        height: 1px;
        background-color: #ccc;
        position: absolute;
        left: 0px;
      }

      .tui-chart-map-legend-tick-label {
        position: absolute;
        left: 30px;
        text-align: left;
      }

      &.horizontal {
        .tui-chart-map-legend-tick {
          top: 0px;
          width: 1px;
          height: 15px;
        }

        .tui-chart-map-legend-tick-label {
          top: 30px;
        }
      }
    }

    .tui-chart-map-legend-wedge {
      position: absolute;
      width: 19px;
      height: 4px;
      border-left: 2px solid #777;
      border-right: 2px solid #777;
      left: 8px;
      top: 30px;
      display: none;
      &.show {
        display: block;
      }
    }

    &.horizontal {
      padding-left: 0;
      padding-right: 0;
      .tui-chart-legend {
        clear: none;
        float: left;
        white-space: nowrap;
      }
    }
  }

  .tui-chart-circle-legend-area {
    position: absolute;
    z-index: 400;
    .tui-chart-circle-legend-label-area {
      position: absolute;
      left: 0;
      top: 0;
      .tui-chart-circle-legend-label {
        position: absolute;
        font-size: 9px;
        white-space: nowrap;
        .text-shadow(#fff 0px 0px 3px);
      }
    }
  }

  .tui-chart-tooltip-area {
    position: absolute;
    z-index: 500;
    * {
      .user-select();
    }
    .tui-chart-tooltip {
      z-index: 100;
      position: absolute;
      display: none;
      user-select: none;
      &.show {
        display: block;
      }
      .tui-chart-default-tooltip {
        padding: 4px 0;
        font-size: 12px;
        min-width: 100px;
        color: #fff;
        .border-radius(5px);
        background-color: rgba(0, 0, 0, 0.7);
        background-color: #555 \9;
        > * {
          padding: 2px 7px;
          text-align: center;
          white-space: nowrap;
        }

        > :first-child {
          backgound-color: #fff;
          font-weight: bold;
        }

        &.tui-chart-group-tooltip {
          > * {
            text-align: left;
            position: relative;
            padding-left: @legend-rect-width + 8;
            padding-top: 4px;
            padding-bottom: 4px;
          }
          .tui-chart-legend-rect {
            position: absolute;
            left: 7px;
            top: 2px;
            &.line {
              top: 7px;
            }
          }

          > :first-child {
            padding-left: 7px;
            padding-top: 6px;
            padding-bottom: 6px;
            text-align: center;
          }
        }

        .hide {
          display: none;
        }
      }
    }

    .tui-chart-group-tooltip-sector {
      z-index: 50;
      position: absolute;
      background-color: #aaa;
      .opacity(0.3);
      display: none;
      &.show {
        display: block;
      }
    }
  }

  &.tui-map-chart {
    .tui-chart-series-area {
      overflow: hidden;
    }

    .tui-chart-tooltip-area {
      .tui-chart-default-tooltip {
        > :first-child {
          font-weight: normal;
        }
      }
    }
  }
}

.tui-chart-size-check-element {
  clear: both;
  position: absolute;
  word-wrap: break-word;
  word-break: keep-all;
  top: 100000px;
  left: 100000px;
  width: 1000px;
  height: 100px;
  padding: 0;
  line-height: 1;
  > span {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
  }
}

:root .tui-chart .tui-chart-axis-area {
  &.vertical .tui-chart-title-area {
    filter: none \0;
  }
  &.horizontal {
    .tui-chart-label {
      &.tui-chart-xaxis-rotation25, &.tui-chart-xaxis-rotation45, &.tui-chart-xaxis-rotation65, &.tui-chart-xaxis-rotation85 {
        span {
          filter: none \0;
        }
      }
    }
  }
}

@import 'prefixer';

@axis-color: #000;
@chart-padding: 10px;
@legend-rect-width: 12px;
@hidden-padding: 1px;

.user-select() {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.tui-chart {
  position: relative;
  &, * {
    .border-box();
    line-height: 1;
  }
  .tui-chart-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    z-index: 350;
  }

  .tui-chart-axis-area {
    z-index: 300;
    position: absolute;
    * {
      .user-select();
    }
    .tui-chart-title-area {
      position: absolute;
    }

    .tui-chart-tick-area, .tui-chart-label-area {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .tui-chart-tick-area {
      .tui-chart-tick {
        position: absolute;
        background-color: @axis-color;
      }
    }

    .tui-chart-label-area {
      .tui-chart-label {
        position: absolute;
        > span {
          line-height: 1.2;
        }
      }
    }

    &.vertical {
      top: @chart-padding;

      .tui-chart-title-area {
        text-align: center;
        white-space: nowrap;
        top: 0;
        &.rotation {
          .transform-origin(top left);
          .rotate(-90deg);
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
      }

      .tui-chart-tick-area {
        right: 0;
        .tui-chart-tick {
          right: 1px;
          width: 5px;
          height: 1px;
        }

        .tui-chart-tick-line {
          left: auto;
          right: 0;
          width: 1px;
          background-color: @axis-color;
          position: absolute;
        }
      }

      .tui-chart-label-area {
        right: 10px;
        .tui-chart-label {
          left: 0;
          width: 100%;
          text-align: right;
          white-space: nowrap;
        }
      }

      &.right {
        .tui-chart-title-area {
          text-align: center;
          white-space: nowrap;
          top: 0;
          &.rotation {
            .transform-origin(top left);
            .rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
          }
        }

        .tui-chart-tick-area, .tui-chart-label-area {
          left: 0;
        }

        .tui-chart-label-area {
          .tui-chart-label {
            text-align: left;
            padding-right: 0;
            padding-left: 10px;
          }
        }
      }

      &.center {
        .tui-chart-title-area {
          width: 100% !important;
          .rotate(0deg);
          filter: none;
          top: auto;
        }

        .tui-chart-label-area {
          left: 0;
          width: 100% !important;
          .tui-chart-label {
            text-align: center;
          }
        }
      }

      &.right .tui-chart-tick-area, &.center .tui-chart-tick-area.opposite-side{
        border-right: none;
        .tui-chart-tick {
          left: 1px;
        }

        .tui-chart-tick-line {
          right: auto;
          left: 0;
        }
      }
    }

    &.horizontal {
      right: @chart-padding;

      .tui-chart-title-area {
        bottom: 0;
        width: 100%;
        text-align: center;
      }

      &.division {
        .tui-chart-title-area {
          left: 0;
          width: auto;
        }

        .tui-chart-title-area.right {
          left: auto;
          right: 0;
        }
      }

      .tui-chart-tick-area, .tui-chart-label-area {
        left: 0;
      }

      .tui-chart-tick-area {
        .tui-chart-tick-line {
          top: 0;
          height: 1px;
          background-color: @axis-color;
          position: absolute;
        }
        .tui-chart-ticks {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .tui-chart-tick {
          top: 0;
          width: 1px;
          height: 6px;
        }
      }

      .tui-chart-label-area {
        .tui-chart-label {
          top: 10px;
          text-align: center;
          word-wrap: break-word;
          word-break: keep-all;
          &.tui-chart-xaxis-rotation {
            text-align: right;
            span {
              position: absolute;
              right: 0;
              top: 0;
            }
            white-space: nowrap;
          }

          &.tui-chart-xaxis-rotation25 {
            .rotate(-25deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9063077870366499, M12=0.42261826174069944, M21=-0.42261826174069944, M22=0.9063077870366499)";
            }
          }
          &.tui-chart-xaxis-rotation45 {
            .rotate(-45deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";
            }
          }
          &.tui-chart-xaxis-rotation65 {
            .rotate(-65deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.42261826174069944, M12=0.9063077870366499, M21=-0.9063077870366499, M22=0.42261826174069944)";
            }
          }
          &.tui-chart-xaxis-rotation85 {
            .rotate(-85deg);
            span {
              -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.08715574274765814, M12=0.9961946980917455, M21=-0.9961946980917455, M22=0.08715574274765814)";
            }
          }
        }
      }
    }
  }

  .tui-chart-plot-area {
    position: absolute;
    right: @chart-padding;
    top: @chart-padding;
    z-index: -100;

    .tui-chart-plot-optional-lines-area {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .tui-chart-plot-lines-area {
      width: 100%;
      height: 100%;
      position:relative;
    }
    .tui-chart-plot-line {
      background-color: #ccc;
      position: absolute;
      &.vertical {
        top: 0px;
        width: 1px;
      }

      &.horizontal {
        left: 0px;
        height: 1px;
      }
    }
  }

  .tui-chart-series-area {
    z-index: 200;
    position: absolute;
    &:first-child {
      overflow: visible;
    }
    .user-select();

    .tui-chart-series-block-area {
      position: absolute;
      left: 10px;
      top: 10px;
      .tui-chart-series-block {
        position: absolute;
      }
    }

    .tui-chart-series-label-area {
      position: absolute;
      overflow: visible;
      left: 0px;
      top: 0px;
      display: none;
      .opacity(0);
      .tui-chart-series-label {
        position: absolute;
        cursor: default;
        text-align: center;
        white-space: nowrap;
        .text-shadow(#fff 0px 0px 3px);
      }
      &.show {
        display: block;
      }

      &.opacity {
        .opacity(1);
      }
    }

    .tui-chart-series-graph-area {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .tui-chart-zoom-area {
    z-index: 1500;
    position: absolute;
    border: 1px solid #cccccc;
    background-color: #cccccc;
    .border-radius(4px);
    > .tui-chart-zoom-btn {
      width: 21px;
      height: 21px;
      display: block;
      background-color: #fff;
      cursor: pointer;
      position: relative;
      &:first-child {
        margin-bottom: 1px;
        .border-radius(4px 4px 0 0);
      }
      &:last-child {
        .border-radius(0 0 4px 4px);
      }
      &:hover {
        background-color: #efefef;
      }
      > div {
        font-szie: 0;
        background-color: #555555;
        position: absolute;
        &.horizontal-line {
          width:9px;
          height: 1px;
          left: 6px;
          top: 10px;
        }
        &.vertical-line {
          width:1px;
          height: 9px;
          left: 10px;
          top: 6px;
        }
      }
    }
  }

  .tui-chart-series-custom-event-area {
    z-index: 1000;
    position: absolute;
    left: 0;
    top: 0;
    background-color:rgba(0, 0, 0, 0);

    &.hide {
      display: none;
    }

    &.drag {
      cursor: move;
    }

    .tui-chart-drag-selection {
      top: 10px;
      height: 100%;
      background-color: gray;
      .opacity(0.3);
      position: absolute;
      display: none;
      &.show {
        display: block;
      }
    }

    .tui-chart-reset-zoom-btn {
      position:absolute;
      left: 20px;
      top: 20px;
      font-size: 11px;
      padding: 5px;
      border: 1px solid #ccc;
      background-color: #efefef;
      cursor: pointer;
      .user-select();
    }
  }

  .tui-chart-legend-rect {
    margin-top: 2px;
    width: @legend-rect-width;
    height: @legend-rect-width;
    &.line {
      height: 2px;
    }
    &.area, &.bubble {
      .opacity(0.5);
    }
  }
  .tui-chart-chartExportMenu-area {
    z-index: 900;
    position: absolute;
    font-family: Verdana;
    margin: 0;
    padding: 0;
    .tui-chart-chartExportMenu-button{
      position: absolute;
      right :0;
      background-color: #fff;
      border: 1px solid #000;
      font-size: 12px;
      padding: 3px 5px;
      margin: 0;
      cursor: pointer;
    }
    ul {
      display: none;
      position: absolute;
      top: 20px;
      right: 0;
      width: 100px;
      background: #fafaff;
      border: 1px solid #000;
      font-size: 0.8em;
      padding: 0;
      margin: 0;
        > li {
          margin: 0;
          padding: 7px 3px;
          border-right: 0.5px solid #000;
          border-bottom: 0.5px solid #000;
          border-collapse: collapse;
          text-align: center;
          list-style-type: none;
          line-height: 1;
          cursor: pointer;
        }
    }
  }
  .tui-chart-legend-area {
    z-index: 400;
    position: absolute;
    padding: 10px;
    .user-select();
    .tui-chart-legend {
      clear: both;
      > div {
        float: left;
      }

      .tui-chart-legend-checkbox-area {
        width: 20px;
        height: 20px;
        position: relative;
        input {
          left: 2px;
          top: 2px;
          *left: -2px;
          *top: -2px;
          position: absolute;
          padding: 0;
          margin: 0;
        }
        .border-box();
      }

      .tui-chart-legend-label {
        padding: 2px 0 2px 4px;
        cursor: pointer;
        .content-box();
        line-height: 1;
      }

      &.unselected {
        .tui-chart-legend-rect {
          .opacity(0.3);
        }

        .tui-chart-legend-label {
          .opacity(0.3);
        }
      }
    }

    .tui-chart-legend-tick-area {
      position:absolute;
      left: 10px;
      top: 10px;
      .tui-chart-map-legend-tick {
        width: 15px;
        height: 1px;
        background-color: #ccc;
        position: absolute;
        left: 0px;
      }

      .tui-chart-map-legend-tick-label {
        position: absolute;
        left: 30px;
        text-align: left;
      }

      &.horizontal {
        .tui-chart-map-legend-tick {
          top: 0px;
          width: 1px;
          height: 15px;
        }

        .tui-chart-map-legend-tick-label {
          top: 30px;
        }
      }
    }

    .tui-chart-map-legend-wedge {
      position: absolute;
      width: 19px;
      height: 4px;
      border-left: 2px solid #777;
      border-right: 2px solid #777;
      left: 8px;
      top: 30px;
      display: none;
      &.show {
        display: block;
      }
    }

    &.horizontal {
      padding-left: 0;
      padding-right: 0;
      .tui-chart-legend {
        clear: none;
        float: left;
        white-space: nowrap;
      }
    }
  }

  .tui-chart-circle-legend-area {
    position: absolute;
    z-index: 400;
    .tui-chart-circle-legend-label-area {
      position: absolute;
      left: 0;
      top: 0;
      .tui-chart-circle-legend-label {
        position: absolute;
        font-size: 9px;
        white-space: nowrap;
        .text-shadow(#fff 0px 0px 3px);
      }
    }
  }

  .tui-chart-tooltip-area {
    position: absolute;
    z-index: 500;
    * {
      .user-select();
    }
    .tui-chart-tooltip {
      z-index: 100;
      position: absolute;
      display: none;
      &.show {
        display: block;
      }
      .tui-chart-default-tooltip {
        padding: 4px 0;
        font-size: 12px;
        min-width: 100px;
        color: #fff;
        .border-radius(5px);
        background-color: rgba(0, 0, 0, 0.7);
        background-color: #555 \9;
        > * {
          padding: 2px 7px;
          text-align: center;
          white-space: nowrap;
        }

        > :first-child {
          backgound-color: #fff;
          font-weight: bold;
        }

        &.tui-chart-group-tooltip {
          > * {
            text-align: left;
            position: relative;
            padding-left: @legend-rect-width + 8;
            padding-top: 4px;
            padding-bottom: 4px;
          }
          .tui-chart-legend-rect {
            position: absolute;
            left: 7px;
            top: 2px;
            &.line {
              top: 7px;
            }
          }

          > :first-child {
            padding-left: 7px;
            padding-top: 6px;
            padding-bottom: 6px;
            text-align: center;
          }
        }

        .hide {
          display: none;
        }
      }
    }

    .tui-chart-group-tooltip-sector {
      z-index: 50;
      position: absolute;
      background-color: #aaa;
      .opacity(0.3);
      display: none;
      &.show {
        display: block;
      }
    }
  }

  &.tui-map-chart {
    .tui-chart-series-area {
      overflow: hidden;
    }

    .tui-chart-tooltip-area {
      .tui-chart-default-tooltip {
        > :first-child {
          font-weight: normal;
        }
      }
    }
  }
}

.tui-chart-size-check-element {
  clear: both;
  position: absolute;
  word-wrap: break-word;
  word-break: keep-all;
  top: 100000px;
  left: 100000px;
  width: 1000px;
  height: 100px;
  padding: 0;
  line-height: 1;
  > span {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
  }
}

:root .tui-chart .tui-chart-axis-area {
  &.vertical .tui-chart-title-area {
    filter: none \0;
  }
  &.horizontal {
    .tui-chart-label {
      &.tui-chart-xaxis-rotation25, &.tui-chart-xaxis-rotation45, &.tui-chart-xaxis-rotation65, &.tui-chart-xaxis-rotation85 {
        span {
          filter: none \0;
        }
      }
    }
  }
}


Fix path

Fix path

// Navigation
.breadcrumb,
.tab,
.pagination,
.nav {
  list-style: none;
  margin: .5rem 0;
}

@import 'breadcrumbs.less';
@import 'tabs.less';
@import 'pagination.less';
@import 'navs.less';

// Navigation
.breadcrumb,
.tab,
.pagination,
.nav {
  list-style: none;
  margin: .5rem 0;
}

@import 'src/breadcrumbs.less';
@import 'src/tabs.less';
@import 'src/pagination.less';
@import 'src/navs.less';


commenting style

commenting style

#creaturegrid {
	display: block;
	height: 700px;
	width: 700px;
	margin: 0 auto;
	line-height: 0;
	background-image: url('~assets/interface/set.png');
	background-size: 100%;
	padding: 27px;
	transform-origin: 0 0;
}

#creaturegrid .vignette,
.vignette div.border,
.vignette div.overlay {
	height: 100px;
	width: 100px;
	background-size: 100% 100%;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#creaturegrid .vignette div.overlay {
	display: block;
	position: absolute;
	opacity: 0.75;
	z-index: 1;
}

#creaturegrid .vignette div.border {
	display: block;
	position: absolute;
	background-image: url('~assets/interface/frame_gothic.png');
	z-index: 2;
}

#creaturegrid .vignette.active div.border,
#creaturegrid .vignette:hover div.border {
	background-image: url('~assets/interface/frame.png');
}

#creaturegrid .vignette.dead div.overlay {
	background-image: url('~assets/icons/dead.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.notsummonable div.overlay {
	background-image: url('~assets/icons/plasma.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.locked div.overlay {
	background-image: url('~assets/icons/locked.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

// Hovering on locked unit gives not-allowed cursor

#creaturegrid .vignette.locked:hover {
	cursor: not-allowed;
}

#creaturegrid .vignette.queued div.overlay {
	background-image: url('~assets/icons/queue.svg');
	animation: pulse0106 750ms infinite alternate;
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette .tooltip {
	position: absolute;
	z-index: 3;
	bottom: 0;
	transition: bottom 150ms;
}

#creaturegrid .vignette:hover .tooltip {
	position: absolute;
	bottom: 20px;
	left: 0;
	display: block;
	z-index: 3;
}

#dash #creaturegrid .tooltip .content {
	width: 100px;
}

#creaturegrid .tooltip .content {
	position: absolute;
	display: block;
	width: 128px;
	font-size: 85%;
	text-align: center;
	padding: 4px 2px;
	box-sizing: border-box;
	color: white;
	background: rgba(0, 0, 0, 0.8);
	line-height: 10px;
	border: 1px solid #555;
}

#creaturegrid {
	.realmA .content {
		text-shadow: 0 0 5px gold;
	}

	.realmE .content {
		text-shadow: 0 0 5px orange;
	}

	.realmG .content {
		text-shadow: 0 0 5px green;
	}

	.realmL .content {
		text-shadow: 0 0 5px red;
	}

	.realmP .content {
		text-shadow: 0 0 5px violet;
	}

	.realmS .content {
		text-shadow: 0 0 5px blue;
	}

	.realmW .content {
		text-shadow: 0 0 5px indigo;
	}
}

#creaturegrid {
	display: block;
	height: 700px;
	width: 700px;
	margin: 0 auto;
	line-height: 0;
	background-image: url('~assets/interface/set.png');
	background-size: 100%;
	padding: 27px;
	transform-origin: 0 0;
}

#creaturegrid .vignette,
.vignette div.border,
.vignette div.overlay {
	height: 100px;
	width: 100px;
	background-size: 100% 100%;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#creaturegrid .vignette div.overlay {
	display: block;
	position: absolute;
	opacity: 0.75;
	z-index: 1;
}

#creaturegrid .vignette div.border {
	display: block;
	position: absolute;
	background-image: url('~assets/interface/frame_gothic.png');
	z-index: 2;
}

#creaturegrid .vignette.active div.border,
#creaturegrid .vignette:hover div.border {
	background-image: url('~assets/interface/frame.png');
}

#creaturegrid .vignette.dead div.overlay {
	background-image: url('~assets/icons/dead.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.notsummonable div.overlay {
	background-image: url('~assets/icons/plasma.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.locked div.overlay {
	background-image: url('~assets/icons/locked.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

//hover on locked unit gives not-allowed cursor

#creaturegrid .vignette.locked:hover {
	cursor: not-allowed;
}

#creaturegrid .vignette.queued div.overlay {
	background-image: url('~assets/icons/queue.svg');
	animation: pulse0106 750ms infinite alternate;
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette .tooltip {
	position: absolute;
	z-index: 3;
	bottom: 0;
	transition: bottom 150ms;
}

#creaturegrid .vignette:hover .tooltip {
	position: absolute;
	bottom: 20px;
	left: 0;
	display: block;
	z-index: 3;
}

#dash #creaturegrid .tooltip .content {
	width: 100px;
}

#creaturegrid .tooltip .content {
	position: absolute;
	display: block;
	width: 128px;
	font-size: 85%;
	text-align: center;
	padding: 4px 2px;
	box-sizing: border-box;
	color: white;
	background: rgba(0, 0, 0, 0.8);
	line-height: 10px;
	border: 1px solid #555;
}

#creaturegrid {
	.realmA .content {
		text-shadow: 0 0 5px gold;
	}

	.realmE .content {
		text-shadow: 0 0 5px orange;
	}

	.realmG .content {
		text-shadow: 0 0 5px green;
	}

	.realmL .content {
		text-shadow: 0 0 5px red;
	}

	.realmP .content {
		text-shadow: 0 0 5px violet;
	}

	.realmS .content {
		text-shadow: 0 0 5px blue;
	}

	.realmW .content {
		text-shadow: 0 0 5px indigo;
	}
}


fixes issue #1568

fixes issue #1568

#creaturegrid {
	display: block;
	height: 700px;
	width: 700px;
	margin: 0 auto;
	line-height: 0;
	background-image: url('~assets/interface/set.png');
	background-size: 100%;
	padding: 27px;
	transform-origin: 0 0;
}

#creaturegrid .vignette,
.vignette div.border,
.vignette div.overlay {
	height: 100px;
	width: 100px;
	background-size: 100% 100%;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#creaturegrid .vignette div.overlay {
	display: block;
	position: absolute;
	opacity: 0.75;
	z-index: 1;
}

#creaturegrid .vignette div.border {
	display: block;
	position: absolute;
	background-image: url('~assets/interface/frame_gothic.png');
	z-index: 2;
}

#creaturegrid .vignette.active div.border,
#creaturegrid .vignette:hover div.border {
	background-image: url('~assets/interface/frame.png');
}

#creaturegrid .vignette.dead div.overlay {
	background-image: url('~assets/icons/dead.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.notsummonable div.overlay {
	background-image: url('~assets/icons/plasma.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.locked div.overlay {
	background-image: url('~assets/icons/locked.svg');
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette.queued div.overlay {
	background-image: url('~assets/icons/queue.svg');
	animation: pulse0106 750ms infinite alternate;
	background-color: rgba(0, 0, 0, 0.55);
}

#creaturegrid .vignette .tooltip {
	position: absolute;
	z-index: 3;
	bottom: 0;
	transition: bottom 150ms;
}

#creaturegrid .vignette:hover .tooltip {
	position: absolute;
	bottom: 20px;
	left: 0;
	display: block;
	z-index: 3;
}

#dash #creaturegrid .tooltip .content {
	width: 100px;
}

#creaturegrid .tooltip .content {
	position: absolute;
	display: block;
	width: 128px;
	font-size: 85%;
	text-align: center;
	padding: 4px 2px;
	box-sizing: border-box;
	color: white;
	background: rgba(0, 0, 0, 0.8);
	line-height: 10px;
	border: 1px solid #555;
}

#creaturegrid {
	.realmA .content {
		text-shadow: 0 0 5px gold;
	}

	.realmE .content {
		text-shadow: 0 0 5px orange;
	}

	.realmG .content {
		text-shadow: 0 0 5px green;
	}

	.realmL .content {
		text-shadow: 0 0 5px red;
	}

	.realmP .content {
		text-shadow: 0 0 5px violet;
	}

	.realmS .content {
		text-shadow: 0 0 5px blue;
	}

	.realmW .content {
		text-shadow: 0 0 5px indigo;
	}
}

#creaturegrid {
	display: block;
	height: 700px;
	width: 700px;
	margin: 0 auto;
	line-height: 0;
	background-image: url('~assets/interface/set.png');
	background-size: 100%;
	padding: 27px;
	transform-origin: 0 0;
}

#creaturegrid .vignette,
.vignette div.border,
.vignette div.overlay {
	height: 100px;
	width: 100px;
	background-size: 100% 100%;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#creaturegrid .vignette div.overlay {
	display: block;
	position: absolute;
	opacity: 0.75;
	z-index: 1;
}

#creaturegrid .vignette div.border {
	display: block;
	position: absolute;
	background-image: url('~assets/interface/frame_gothic.png');
	z-index: 2;
}

#creaturegrid .vignette.active div.border,
#creaturegrid .vignette:hover div.border {
	background-image: url('~assets/interface/frame.png');
}

#creaturegrid .vignette.dead div.overlay {
	background-image: url('~assets/icons/dead.svg');
}

#creaturegrid .vignette.notsummonable div.overlay {
	background-image: url('~assets/icons/plasma.svg');
}

#creaturegrid .vignette.locked div.overlay {
	background-image: url('~assets/icons/locked.svg');
}

#creaturegrid .vignette.queued div.overlay {
	background-image: url('~assets/icons/queue.svg');
	animation: pulse0106 750ms infinite alternate;
}

#creaturegrid .vignette .tooltip {
	position: absolute;
	z-index: 3;
	bottom: 0;
	transition: bottom 150ms;
}

#creaturegrid .vignette:hover .tooltip {
	position: absolute;
	bottom: 20px;
	left: 0;
	display: block;
	z-index: 3;
}

#dash #creaturegrid .tooltip .content {
	width: 100px;
}

#creaturegrid .tooltip .content {
	position: absolute;
	display: block;
	width: 128px;
	font-size: 85%;
	text-align: center;
	padding: 4px 2px;
	box-sizing: border-box;
	color: white;
	background: rgba(0, 0, 0, 0.8);
	line-height: 10px;
	border: 1px solid #555;
}

#creaturegrid {
	.realmA .content {
		text-shadow: 0 0 5px gold;
	}

	.realmE .content {
		text-shadow: 0 0 5px orange;
	}

	.realmG .content {
		text-shadow: 0 0 5px green;
	}

	.realmL .content {
		text-shadow: 0 0 5px red;
	}

	.realmP .content {
		text-shadow: 0 0 5px violet;
	}

	.realmS .content {
		text-shadow: 0 0 5px blue;
	}

	.realmW .content {
		text-shadow: 0 0 5px indigo;
	}
}


improve(styles): hide search on narrow viewports

.navbar-fixed-top {
  padding: 0;
  background-color: @body-bg;
  border-bottom: 5px solid @brand-primary;
}

.navbar-container {
  width: 100%;
  height: @header-computed-height;
  color: @navbar-default-color;
  background-color: @navbar-default-bg;
  font-size: @navbar-font-size;

  max-width: @page-toc-breakpoint;
  @media (min-width: (@site-menu-breakpoint + 1px)) and (max-width: 1065px) {
    padding-right: (@grid-gutter-width * 1.5);
  }
  @media (min-width: 1065px) and (max-width: @page-toc-breakpoint) {
    max-width: 1005px;
  }

  a {
    color: @navbar-default-link-color;
    &:hover,
    &:focus {
      color: @navbar-default-link-hover-color;
    }
  }

  > div,
  > ul {
    padding: 0;
    height: @header-computed-height;
    line-height: @header-computed-height;
  }

  .navbar-header {
    float: left;
  }

  .push-right {
    float: right;
    > * {
      float: left;
    }
  }

  .brand-name {
    font-size: 20px;
    position: relative;
    bottom: 2px;
  }

  .search-field {
    padding-right: (@grid-gutter-width * 0.5);
  }

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    margin: 0;
    padding: 0;
    float: left;
  }

  .navbar-text {
    margin: 0;
    vertical-align: middle;
    height: @header-computed-height;
    padding-left: 2.5px;

    a,
    a span {
      height: @header-computed-height;
      vertical-align: middle;
      text-decoration: none;
    }

    a {
      display: inline-block;
      height: @header-computed-height;
      line-height: @header-computed-height;
      padding-left: (@grid-gutter-width * 0.25);
      padding-right: (@grid-gutter-width * 0.25);
    }

    &:hover {
      background-color: @gray-lighter;
    }

    button {
      vertical-align: middle;
    }

    .icon {
      position: relative;
      font-size: 22px;
      top: -2px;
    }
  }

  .main-menu {
    overflow: hidden;
    padding: 0;
    a {
      display: inline-block;
      padding: 0 @padding-base-horizontal;
      @media (max-width: @site-menu-breakpoint) {
        padding: 0 6px;
      }
    }

    li {
      &:hover,
      &.active {
        a {
          background-color: @navbar-default-link-active-bg;
        }
      }
    }
  }
}

.site-menu-toggle {
  .hamburger-button();
  margin-right: 10px;//(@grid-gutter-width * 0.5);
  display: none;
  height: @header-computed-height;

  @media (max-width: 710px) {
    &.show-small {
      display: inline-block;
      float: right;
    }
  }

  @media (min-width: (710 + 1px)) and (max-width: @site-menu-breakpoint) {
    &.show-medium {
      display: inline-block;
    }
  }
}

body.site-menu-open .site-menu-toggle {
  .hamburger-button-open();
}

@media (max-width: 710px) {
  .brand-name {
    display: none;
  }

  .navbar {
    .search-field {
      display: none;
    }
    .push-right {
      float: none;
      width: 100%;
    }
    .main-menu {
      float: right;
      padding: 0 (@grid-gutter-width * 0.5);

      li {
        display: inline-block;
        &:first-of-type {
          margin-left: 0 - @padding-base-horizontal;
        }
        &:last-of-type {
          margin-right: 0 - @padding-base-horizontal;
        }
      }
    }
  }
}

.navbar-fixed-top {
  padding: 0;
  background-color: @body-bg;
  border-bottom: 5px solid @brand-primary;
}

.navbar-container {
  width: 100%;
  height: @header-computed-height;
  color: @navbar-default-color;
  background-color: @navbar-default-bg;
  font-size: @navbar-font-size;

  max-width: @page-toc-breakpoint;
  @media (min-width: (@site-menu-breakpoint + 1px)) and (max-width: 1065px) {
    padding-right: (@grid-gutter-width * 1.5);
  }
  @media (min-width: 1065px) and (max-width: @page-toc-breakpoint) {
    max-width: 1005px;
  }

  a {
    color: @navbar-default-link-color;
    &:hover,
    &:focus {
      color: @navbar-default-link-hover-color;
    }
  }

  > div,
  > ul {
    padding: 0;
    height: @header-computed-height;
    line-height: @header-computed-height;
  }

  .navbar-header {
    float: left;
  }

  .push-right {
    float: right;
    > * {
      float: left;
    }
  }

  .brand-name {
    font-size: 20px;
    position: relative;
    bottom: 2px;
  }

  .search-field {
    padding-right: (@grid-gutter-width * 0.5);
  }

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    margin: 0;
    padding: 0;
    float: left;
  }

  .navbar-text {
    margin: 0;
    vertical-align: middle;
    height: @header-computed-height;
    padding-left: 2.5px;

    a,
    a span {
      height: @header-computed-height;
      vertical-align: middle;
      text-decoration: none;
    }

    a {
      display: inline-block;
      height: @header-computed-height;
      line-height: @header-computed-height;
      padding-left: (@grid-gutter-width * 0.25);
      padding-right: (@grid-gutter-width * 0.25);
    }

    &:hover {
      background-color: @gray-lighter;
    }

    button {
      vertical-align: middle;
    }

    .icon {
      position: relative;
      font-size: 22px;
      top: -2px;
    }
  }

  .main-menu {
    overflow: hidden;
    padding: 0;
    a {
      display: inline-block;
      padding: 0 @padding-base-horizontal;
      @media (max-width: @site-menu-breakpoint) {
        padding: 0 6px;
      }
    }

    li {
      &:hover,
      &.active {
        a {
          background-color: @navbar-default-link-active-bg;
        }
      }
    }
  }
}

.site-menu-toggle {
  .hamburger-button();
  margin-right: 10px;//(@grid-gutter-width * 0.5);
  display: none;
  height: @header-computed-height;

  @media (max-width: 710px) {
    &.show-small {
      display: inline-block;
      float: right;
    }
  }

  @media (min-width: (710 + 1px)) and (max-width: @site-menu-breakpoint) {
    &.show-medium {
      display: inline-block;
    }
  }
}

body.site-menu-open .site-menu-toggle {
  .hamburger-button-open();
}

@media (max-width: 710px) {
  .brand-name {
    display: none;
  }

  .navbar {
    .search-field {
      width: 100%;
      padding: 0 (@grid-gutter-width * 0.5);
      border-top: 1px solid @header-border-bottom-color;
    }
    .push-right {
      float: none;
      width: 100%;
    }
    .main-menu {
      float: right;
      padding: 0 (@grid-gutter-width * 0.5);

      li {
        display: inline-block;
        &:first-of-type {
          margin-left: 0 - @padding-base-horizontal;
        }
        &:last-of-type {
          margin-right: 0 - @padding-base-horizontal;
        }
      }
    }
  }

  .page-wrapper,
  .site-menu,
  .search-results {
    top: (2 * @navbar-height) - (@header-border-bottom-width - 1px);
  }
}


Display details section short info only collapsed

#details-view-container,
#event-view-container {

  .back-button {
    position: relative;
    display: block;
    color: @text-color;
    background-color: @blue-lighter;
    margin-bottom: @sidebar-small-margin;
    padding: 8px 0 8px 40px;
    border-radius: @main-border-radius;
    .icon-icon-back {
      position: absolute;
      left: 12px;
      top: 5px;
    }
  }

  .content {
    overflow-y: auto;
    overflow-x: hidden;

    .details-image {
      width: 100%;
      margin-bottom: @sidebar-small-margin;
      border-radius: @main-border-radius;
    }

    #route-navigation {
      span {
        margin-right: 10px;
        display: inline-block;
      }
      .icon {
        width: 30px;
      }
      .mode {
        width: 80px;
      }
      .number {
        width: 40px;
        margin-right: 0px;
      }
      .leg-destination {
        margin-left: 118px;
      }
    }

    .section {
      position: relative;
      background-color: @white;
      padding: 8px 16px 8px 40px;
      margin-bottom: @sidebar-small-margin;
      border-radius: @main-border-radius;

      .collapser {
        display: block;
        position: relative;
        color: @text-color;
        line-height: 30px;
        padding: 8px 0;

        &:after {
          width: 20px;
          height: 20px;
          font-family: "service-map-icons";
          content: "\f107";
          color: @gray;
          font-size: 24px;
          position: absolute;
          right: 0;
          top: 0;
          line-height: 40px;
        }

        &.collapsed:after {
          content: "\f109";
        }

        &.disabled {
          cursor: default;
          &:after {
            display: none;
          }
        }

        h3 {
          margin: 0;
          span {
            position: absolute;
            left: -28px;
            color: @blue;
            font-size: 22px;
            vertical-align: middle;
          }
        }

        .short-text {
          display: none; // show only in collapsed state.
          color: @gray;
          position: absolute;
          right: 20px;
          top: 0;
          font-size: @font-size-base;
          line-height: 40px;
        }

        &.collapsed .short-text {
          display: block;
        }
      }

      .col-md-6 {
        word-wrap: break-word;
      }

      .section-content {
        margin-top: 16px;
      }

      ul {
        line-height: 20px;
        li {
          margin-bottom: 4px;
        }
      }
    }

    .section.picture {
      padding: 0;
      // div {
      //   height: 56px;
      //   padding: 0;
      //   overflow: hidden;
      //   &:after {
      //     color: @white;
      //     top: 9px;
      //     right: 16px;
      //   }
      // }
      img {
        width: 100%;
      }
      #picture-details {
        img {
//          margin-top: -56px;
        }
      }
    }

    .main-info {
      .collapser {
        border-bottom: 1px solid #ccc;
        margin-left: -26px;
        padding-bottom: 12px;
        &.collapsed {
          border-bottom: 1px solid @white;
        }

        &:after {
          top: 9px;
        }

        .icon-icon-events {
          font-size: 34px;
          margin-top: 4px;
          color: @blue;
          position: absolute;
        }
        canvas {
          position: absolute;
          width: 36px;
          height: 32px;
          left: -6px;
          top: 10px;
        }
        .color-ball {
          position: absolute;
          left: 14px;
          top: 16px;
          width: 16px;
          height: 16px;
        }

        .icon-icon-close {
          float: right;
          cursor: pointer;
        }
        h2 {
          margin: 0;
          padding-left: 42px; // Space for the calendar icon.
          padding-right: 22px; // Space for the collapse icon.
          font-size: 19px;
          min-height: 42px;
          line-height: 42px;
          span {
            line-height: 20px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      #main-info-details {
        margin-top: 4px;
        padding-top: 16px;

        div {
          margin-bottom: 12px;
        }
        .time, .departments {
          color: @gray;
        }
        .departments {
          font-size: 14px;
        }
        address {
          margin-bottom: 0;
        }
        .contact-info {
          color: @blue;
        }
        .highlights p {
          margin-bottom: 4px;
        }
      }
    }

    #events-details {
      .clearfix();
      ul.events {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0;
        width: 100%;
        > li {
          .clearfix();
          padding: 8px 0;
          margin: 0;
          border-bottom: 1px solid #ddd;
          min-height: 57px;
          .time {
            color: @gray;
            width: 35%;
            float: left;
          }
          .name {
            width: 65%;
            float: left;
            padding-left: 16px;
            a {
              color: @blue;
            }
          }
          .icon-icon-outbound-link {
            margin-left: 4px;
          }
        }
      }
      .show-more-events {
        position: relative; // Needed for spinner placement.
        text-align: center;
        color: @gray;
        display: block;
        margin-bottom: 8px;
      }
    }

    #web-services-details {
      ul {
        padding: 0;
      }
    }
  }
}

#details-view-container,
#event-view-container {

  .back-button {
    position: relative;
    display: block;
    color: @text-color;
    background-color: @blue-lighter;
    margin-bottom: @sidebar-small-margin;
    padding: 8px 0 8px 40px;
    border-radius: @main-border-radius;
    .icon-icon-back {
      position: absolute;
      left: 12px;
      top: 5px;
    }
  }

  .content {
    overflow-y: auto;
    overflow-x: hidden;

    .details-image {
      width: 100%;
      margin-bottom: @sidebar-small-margin;
      border-radius: @main-border-radius;
    }

    #route-navigation {
      span {
        margin-right: 10px;
        display: inline-block;
      }
      .icon {
        width: 30px;
      }
      .mode {
        width: 80px;
      }
      .number {
        width: 40px;
        margin-right: 0px;
      }
      .leg-destination {
        margin-left: 118px;
      }
    }

    .section {
      position: relative;
      background-color: @white;
      padding: 8px 16px 8px 40px;
      margin-bottom: @sidebar-small-margin;
      border-radius: @main-border-radius;

      .collapser {
        display: block;
        position: relative;
        color: @text-color;
        line-height: 30px;
        padding: 8px 0;

        &:after {
          width: 20px;
          height: 20px;
          font-family: "service-map-icons";
          content: "\f107";
          color: @gray;
          font-size: 24px;
          position: absolute;
          right: 0;
          top: 0;
          line-height: 40px;
        }

        &.collapsed:after {
          content: "\f109";
        }

        &.disabled {
          cursor: default;
          &:after {
            display: none;
          }
        }

        h3 {
          margin: 0;
          span {
            position: absolute;
            left: -28px;
            color: @blue;
            font-size: 22px;
            vertical-align: middle;
          }
        }

        .short-text {
          color: @gray;
          position: absolute;
          right: 20px;
          top: 0;
          font-size: @font-size-base;
          line-height: 40px;
        }
      }

      .col-md-6 {
        word-wrap: break-word;
      }

      .section-content {
        margin-top: 16px;
      }

      ul {
        line-height: 20px;
        li {
          margin-bottom: 4px;
        }
      }
    }

    .section.picture {
      padding: 0;
      // div {
      //   height: 56px;
      //   padding: 0;
      //   overflow: hidden;
      //   &:after {
      //     color: @white;
      //     top: 9px;
      //     right: 16px;
      //   }
      // }
      img {
        width: 100%;
      }
      #picture-details {
        img {
//          margin-top: -56px;
        }
      }
    }

    .main-info {
      .collapser {
        border-bottom: 1px solid #ccc;
        margin-left: -26px;
        padding-bottom: 12px;
        &.collapsed {
          border-bottom: 1px solid @white;
        }

        &:after {
          top: 9px;
        }

        .icon-icon-events {
          font-size: 34px;
          margin-top: 4px;
          color: @blue;
          position: absolute;
        }
        canvas {
          position: absolute;
          width: 36px;
          height: 32px;
          left: -6px;
          top: 10px;
        }
        .color-ball {
          position: absolute;
          left: 14px;
          top: 16px;
          width: 16px;
          height: 16px;
        }

        .icon-icon-close {
          float: right;
          cursor: pointer;
        }
        h2 {
          margin: 0;
          padding-left: 42px; // Space for the calendar icon.
          padding-right: 22px; // Space for the collapse icon.
          font-size: 19px;
          min-height: 42px;
          line-height: 42px;
          span {
            line-height: 20px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      #main-info-details {
        margin-top: 4px;
        padding-top: 16px;

        div {
          margin-bottom: 12px;
        }
        .time, .departments {
          color: @gray;
        }
        .departments {
          font-size: 14px;
        }
        address {
          margin-bottom: 0;
        }
        .contact-info {
          color: @blue;
        }
        .highlights p {
          margin-bottom: 4px;
        }
      }
    }

    #events-details {
      .clearfix();
      ul.events {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0;
        width: 100%;
        > li {
          .clearfix();
          padding: 8px 0;
          margin: 0;
          border-bottom: 1px solid #ddd;
          min-height: 57px;
          .time {
            color: @gray;
            width: 35%;
            float: left;
          }
          .name {
            width: 65%;
            float: left;
            padding-left: 16px;
            a {
              color: @blue;
            }
          }
          .icon-icon-outbound-link {
            margin-left: 4px;
          }
        }
      }
      .show-more-events {
        position: relative; // Needed for spinner placement.
        text-align: center;
        color: @gray;
        display: block;
        margin-bottom: 8px;
      }
    }

    #web-services-details {
      ul {
        padding: 0;
      }
    }
  }
}


Datepicker and date heading height synchronized.

/*
Every mixin here should cover only a single page view. If it affects more than it, it should be in components.less.
*/

// COMMON

section.page {
  background: white;
}

// LOGIN / SIGNUP / LAUNCH

@login-content-height: @vertical-grid*5.1;

section#login, section#signup, section#launch, section#waiting, section#forgot {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @vertical-grid / 10;
      span {
        width: 200px;
        display: block;
        text-align: center;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @vertical-grid * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;
    }
    .content {
      height: @login-content-height;
      .button-container{
        padding-top: @vertical-grid / 2;
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

section#waiting {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 5.5;
    }
    .content {
      .instruction-text {
        h1 {
          line-height: 200%;
        }
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

section#launch {
  .column {
    .content {
      div#email {
        padding-bottom: @vertical-grid;
      }
    }
  }
}

section#forgot {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 7.5;
    }
    .content {
      .instruction-text {
        p {
          height: @vertical-grid / 2;
          vertical-align: middle;
        }
      }
    }
    #instructions-sent {
      .instruction-text {
        padding-bottom: @vertical-grid;
      }
    }
  }
}

section#signup {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 7;
    }
    .content {
      span#agreeText {
        font-size: @small-font-size;
        color: @content;
        line-height: 19px;
        a {
          color: @highlighted-element;
        }
        a:active {
          color: @highlighted-element-pressed;
        }
      }
    }
  }
}

// INBOX

#inbox-container {
  section#inbox {
    position: relative;
  }
  div#menu-content {
    padding-top: 0;
  }
}

// TASKS DATES

section#tasks-dates {
  #datepicker {
    z-index: 1;
    height: @vertical-grid + 5;
    margin-top: -15px;
    overflow: hidden;
    div#scroller {
      // http://stackoverflow.com/a/18784257
      // css divide width 100% to 3 column
      width: 300%;
      display: -webkit-flex;
      -webkit-justify-content: center;
      display: flex;
      justify-content: center;
      nav[role=navigation].slide {
        -webkit-flex: 1;
        flex: 1;
        ul {
          // http://stackoverflow.com/a/14103766
          // How to stretch html / css horizontal navigation items evenly and fully across a specified container
          display: table;
          width: 100%;
          li {
            display: table-cell;
            width: 14.2857143%;  /* (100 / numItems)% */
            text-align: center;
            a {
              font-size: @small-font-size;
              width: 100%;
              color: @highlighted-element;
              display: table-cell;
              span.day-date {
                vertical-align: middle;
                height: 28px;
                width: 28px;
                display: table-cell;
              }
            }
            a.change-week-arrow {
              display: block;
            }
            a.activeDay {
              font-weight: bold;
              span.day-date {
                color: white;
                border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
                background-color: @highlighted-element;
              }
            }
          }
        }
      }
    }
  }
  .date-heading {
    height: @vertical-grid - 10;
    position: relative;
  }
}

// TODO: Move these to the right place!

button.default-button{
  color: white;
  & {
    background-color: @default-button;
  }
}

// When item is active, show top&bottom borders
.accordion-item-active {
  border-top-style: solid;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: @separator;
  padding-top: 5px;
  padding-bottom: 5px;
  .accordion-title-open {
    margin-top: -5px;
    padding-bottom: 5px;
    .left-input-wrapper {
      padding-left: 1px;
    }
    &.no-checkbox {
      margin-top: -6px;
    }
  }
}

input[type="checkbox"]:checked ~ a#accordionTitleLink {
  color: @default-element;
  .fade-color(@fade-time);
}

div#accordionTitleHeightFix {
  height: @vertical-grid;
}

a#accordionTitleLink {
  color: @content;
  line-height: 19px;
}

/*
Every mixin here should cover only a single page view. If it affects more than it, it should be in components.less.
*/

// COMMON

section.page {
  background: white;
}

// LOGIN / SIGNUP / LAUNCH

@login-content-height: @vertical-grid*5.1;

section#login, section#signup, section#launch, section#waiting, section#forgot {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @vertical-grid / 10;
      span {
        width: 200px;
        display: block;
        text-align: center;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @vertical-grid * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;
    }
    .content {
      height: @login-content-height;
      .button-container{
        padding-top: @vertical-grid / 2;
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

section#waiting {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 5.5;
    }
    .content {
      .instruction-text {
        h1 {
          line-height: 200%;
        }
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

section#launch {
  .column {
    .content {
      div#email {
        padding-bottom: @vertical-grid;
      }
    }
  }
}

section#forgot {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 7.5;
    }
    .content {
      .instruction-text {
        p {
          height: @vertical-grid / 2;
          vertical-align: middle;
        }
      }
    }
    #instructions-sent {
      .instruction-text {
        padding-bottom: @vertical-grid;
      }
    }
  }
}

section#signup {
  .column {
    .banner {
      margin-bottom: -@vertical-grid * 7;
    }
    .content {
      span#agreeText {
        font-size: @small-font-size;
        color: @content;
        line-height: 19px;
        a {
          color: @highlighted-element;
        }
        a:active {
          color: @highlighted-element-pressed;
        }
      }
    }
  }
}

// INBOX

#inbox-container {
  section#inbox {
    position: relative;
  }
  div#menu-content {
    padding-top: 0;
  }
}

// TASKS DATES

section#tasks-dates {
  #datepicker {
    z-index: 1;
    height: @vertical-grid + 5;
    margin-bottom: -5px;
    overflow: hidden;
    div#scroller {
      // http://stackoverflow.com/a/18784257
      // css divide width 100% to 3 column
      width: 300%;
      display: -webkit-flex;
      -webkit-justify-content: center;
      display: flex;
      justify-content: center;
      nav[role=navigation].slide {
        -webkit-flex: 1;
        flex: 1;
        ul {
          // http://stackoverflow.com/a/14103766
          // How to stretch html / css horizontal navigation items evenly and fully across a specified container
          display: table;
          width: 100%;
          li {
            display: table-cell;
            width: 14.2857143%;  /* (100 / numItems)% */
            text-align: center;
            a {
              font-size: @small-font-size;
              width: 100%;
              color: @highlighted-element;
              display: table-cell;
              span.day-date {
                vertical-align: middle;
                height: 28px;
                width: 28px;
                display: table-cell;
              }
            }
            a.change-week-arrow {
              display: block;
            }
            a.activeDay {
              font-weight: bold;
              span.day-date {
                color: white;
                border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
                background-color: @highlighted-element;
              }
            }
          }
        }
      }
    }
  }
  .date-heading {
    position: relative;
  }
}

// TODO: Move these to the right place!

button.default-button{
  color: white;
  & {
    background-color: @default-button;
  }
}

// When item is active, show top&bottom borders
.accordion-item-active {
  border-top-style: solid;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: @separator;
  padding-top: 5px;
  padding-bottom: 5px;
  .accordion-title-open {
    margin-top: -5px;
    padding-bottom: 5px;
    .left-input-wrapper {
      padding-left: 1px;
    }
    &.no-checkbox {
      margin-top: -6px;
    }
  }
}

input[type="checkbox"]:checked ~ a#accordionTitleLink {
  color: @default-element;
  .fade-color(@fade-time);
}

div#accordionTitleHeightFix {
  height: @vertical-grid;
}

a#accordionTitleLink {
  color: @content;
  line-height: 19px;
}


use xmeter box-sizing mixin instead

use xmeter box-sizing mixin instead

/*################################*\
    _base.forms.less
\*################################*/
@import (reference) url('__settings.less');
@import (reference) url('__tool.fallback.box-sizing.less');
@import (reference) url('__tool.module.borders.less');
@import (reference) url('__tool.module.fontsize.less');

@color_gray_dark: fadeout(#000, 50%);
@color_gray:      fadeout(#000, 75%);

fieldset {
  padding: 0 1rem;
  #XMETER .border-vert(all; 1px);
  border-style: solid;
  border-color: @color_gray_dark;
}

// consistent borders for all
input,
select,
textarea,
button {
  padding: 0 0.25rem;
  #XMETER .border-vert(all; 1px);
  border-style: solid;
  border-color: @color_gray;
}

// small font size for textual inputs
input:not([type="button"]):not([type="reset"]):not([type="submit"]),
textarea {
  #XMETER .VARS();
  #XMETER .font-size-block(@h6_font_size; @xmeter_line_height);
}

textarea {
  width: 30rem;
  #XMETER .VARS();
  height: 6 * @xmeter_vru;
  line-height: @xmeter_line_height; // simply looks better
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button {
  background-color: @color_gray;
}

// Override content-box in Normalize (* in base.generic isn’t specific enough)
input[type="search"] {
  #XMETER .box-sizing(border-box);
}

/*################################*\
    _base.forms.less
\*################################*/
@import (reference) url('__settings.less');
@import (reference) url('__tool.module.borders.less');
@import (reference) url('__tool.module.fontsize.less');

@color_gray_dark: fadeout(#000, 50%);
@color_gray:      fadeout(#000, 75%);

fieldset {
  padding: 0 1rem;
  #XMETER .border-vert(all; 1px);
  border-style: solid;
  border-color: @color_gray_dark;
}

// consistent borders for all
input,
select,
textarea,
button {
  padding: 0 0.25rem;
  #XMETER .border-vert(all; 1px);
  border-style: solid;
  border-color: @color_gray;
}

// small font size for textual inputs
input:not([type="button"]):not([type="reset"]):not([type="submit"]),
textarea {
  #XMETER .VARS();
  #XMETER .font-size-block(@h6_font_size; @xmeter_line_height);
}

textarea {
  width: 30rem;
  #XMETER .VARS();
  height: 6 * @xmeter_vru;
  line-height: @xmeter_line_height; // simply looks better
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button {
  background-color: @color_gray;
}

// Override content-box in Normalize (* in base.generic isn’t specific enough)
input[type="search"] {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


fixed menu - bootstrap

fixed menu - bootstrap

// my variables
//
//

@import "../../../../../../../../mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/variables.less";
@metalblue: @blueDark;

body {
    background: @grayDarker;
    color: @textColor;
    border: 0;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
}
ul {
    list-style: none;
    margin: 0px;
}
.navbar-inner {
    border: 0px !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.big-container {
    background-color: @grayDarker !important;
}
a#widgets-area-button {
    color: #fff;
    position: absolute;
    top: 5px;
    right: 1px;
    padding: 5px 10px;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
}
a#main-menu-toggle {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 12px;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
    border-right: 1px solid #47474e;
}
/*.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4;
    filter: alpha(opacity=40);
}
.open {
}*/
#flash {
    position: relative;
    margin-right: 4%;
    margin-left: 4%;
}
.breadcrumb {
    padding: 0px 15px !important;
    margin: 0px !important;
    background-color: transparent !important;
}
.content {
    margin: 0px !important;
}
.right-menu {
    text-align: center !important;
    margin: 0px !important;
}
form .control-label {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.required {
    color: red !important;
}

div.savestatus{ /* Style for the "Saving Form Contents" DIV that is shown at the top of the form */
    width:200px;
    padding:2px 5px;
    border: 1px solid @yellow;
    background: #fff6e5;
    -moz-border-radius: @baseBorderRadius;
    -webkit-border-radius: @baseBorderRadius;
    border-radius:5px;
    color: @yellow;
    position: fixed;
    top: 10px;
    }

form#feedbackform div{
    margin-bottom:9px;
}

.footer {
  position: relative;
  margin-top: -150px;
  height: 150px;
  clear: both;
  padding-top: 20px;
}
.left-menu {

}
.center {
    min-height: 100%;
    background: #fff;
    filter: none;
    -webkit-border-radius: @baseBorderRadius;
    -moz-border-radius: @baseBorderRadius;
    border: 2px solid #eee;
    margin-bottom: 20px;
    margin-top: 10px;
    position: relative;
    font-size: @fontSizeMini;
}
.page-header {
    padding-top: 9px;
}
.grid-parent-block {
    margin: 0 !important;
    padding: 7px !important;
}
.select2-container {
    min-width: 100px;
}

// my variables
//
//

@import "/../../../../../../vendor/twbs/bootstrap/less/variables.less";
@metalblue: @blueDark;

body {
    background: @grayDarker;
    color: @textColor;
    border: 0;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
}
ul {
    list-style: none;
    margin: 0px;
}
.navbar-inner {
    border: 0px !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.big-container {
    background-color: @grayDarker !important;
}
a#widgets-area-button {
    color: #fff;
    position: absolute;
    top: 5px;
    right: 1px;
    padding: 5px 10px;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
}
a#main-menu-toggle {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 12px;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
    border-right: 1px solid #47474e;
}
/*.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4;
    filter: alpha(opacity=40);
}
.open {
}*/
#flash {
    position: relative;
    margin-right: 4%;
    margin-left: 4%;
}
.breadcrumb {
    padding: 0px 15px !important;
    margin: 0px !important;
    background-color: transparent !important;
}
.content {
    margin: 0px !important;
}
.right-menu {
    text-align: center !important;
    margin: 0px !important;
}
form .control-label {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.required {
    color: red !important;
}

div.savestatus{ /* Style for the "Saving Form Contents" DIV that is shown at the top of the form */
    width:200px;
    padding:2px 5px;
    border: 1px solid @yellow;
    background: #fff6e5;
    -moz-border-radius: @baseBorderRadius;
    -webkit-border-radius: @baseBorderRadius;
    border-radius:5px;
    color: @yellow;
    position: fixed;
    top: 10px;
    }

form#feedbackform div{
    margin-bottom:9px;
}

.footer {
  position: relative;
  margin-top: -150px;
  height: 150px;
  clear: both;
  padding-top: 20px;
}
.left-menu {

}
.center {
    min-height: 100%;
    background: #fff;
    filter: none;
    -webkit-border-radius: @baseBorderRadius;
    -moz-border-radius: @baseBorderRadius;
    border: 2px solid #eee;
    margin-bottom: 20px;
    margin-top: 10px;
    position: relative;
    font-size: @fontSizeMini;
}
.page-header {
    padding-top: 9px;
}
.grid-parent-block {
    margin: 0 !important;
    padding: 7px !important;
}
.select2-container {
    min-width: 100px;
}