/* main html */
.central {
    text-align: center;
}

div.no_selection {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.toolbar {
    padding: 4px;
    display: inline-block;
    font-size: 10px;
    height: 23px;
    width: inherit;
}

.toolbar_label {
    padding: 0px 4px 0px 4px;
    display: inline;
    font-family: sans-serif;
    font-size: 12px;
}

.toolbar_button {
    font-size: 10px;
    font-family: sans-serif;
}

.toolbar_button_label {
    font-size: 10px;
    font-family: sans-serif;
}

.scollbar_wrap {
    padding: 5px;
}

#userfilter,
#levelfilter,
#mdsslider {
    width: 100px;
    display: inline-block;
}

#threadsview {
    text-align: center;
    padding: 4px;
    height: 670px;
    width: 960px;
    overflow: auto;
}

#clusterview {
    text-align: center;
    padding: 4px;
    width: 300px;
    height: 500px;
}

#mdsview {
    text-align: center;
    padding: 4px;
    width: 300px;
    height: 300px;
}

#stateview,
#tweetview,
#featureview {
    text-align: left;
    padding: 4px;
    height: 120px;
    width: 950px;
}

#featureview {
    overflow-x: auto;
    overflow-y: hidden;
}

#stateview {
    overflow: hidden;
}

#tweetview {
    overflow: auto;
}

#stateaxis-x,
#stateaxis-y {
    font-size: 10px;
    font-family: sans-serif;
}

.twtr-hashtag,
.twtr-hyperlink,
.twtr-atreply {
	text-decoration: none;
    color: #0084B4;
}

/* thread */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 10px;
}

.tbrush .extent {
    stroke: black;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

.brushrect {
	fill-opacity: 0.2;
	fill: royalblue;
}

.timeindicator {
    stroke: black;
    stroke-width: 1px;
    stroke-dasharray: 5,5;
}

.threadline {
	stroke: black;
	stroke-width: 1px;
	stroke-opacity: 0.5;
}

.thhandle.selected .timecircle, 
.thhandle.highlighted .timecircle {
    fill-opacity: 0.3;
    stroke-width: 2px;
    stroke: firebrick;
}

.thlink {
    stroke: black;
    stroke-width: 0.5px;
    fill: none;
}

.volume {
    stroke: none;
    fill: darkgray;
    fill-opacity: 0.8;
}

.user {
    fill-opacity: 0.9;
	stroke: lightgray;
	stroke-width: 0.5px;
}

.user.dupuser {
    stroke: black;
    stroke-width: 1.5px;
}

.user.nvertex {
    fill-opacity: 0.15;
}

.user.vertex {
    stroke: black;
}

.user.highlighted,
.user.dupuser.highlighted {
    stroke: firebrick;
    stroke-width: 2px;
}

.dupuserlink {
    stroke: firebrick;
    stroke-width: 2px;
    fill: none;
}

.userlink {
    stroke: black;
    stroke-opacity: 0.5;
    fill: none;
}

.userlink.highlighted {
    stroke: black;
    stroke-width: 2px;
    stroke-opacity: 1.0; 
    fill: none;
}

.state {
    stroke: none;
    fill-opacity: 0.35;
}

.state.highlighted {
    stroke: firebrick;
    stroke-width: 2px;
}

/* threadglyph */
.timecircle {
    fill-opacity: 0.3;
}

.timearc {
    stroke: black;
    fill-opacity: 0.8;
}

.innercircle {
    fill: white;
    stroke: black;
}

/* clusterview */
.clusternode.selected .scorec, 
.clusternode.highlighted .scorec,
.glyphnode.selected .timecircle,
.glyphnode.highlighted .timecircle {
    stroke: firebrick;
    stroke-width: 2px;
}

.clusterlink {
    stroke: gray;
    fill: none;
}

.backrect {
    fill: transparent;
}

/* treeglyph */
.clusternode .scorec,
.levelrect .scorerect {
    stroke: 0.5px;
    stroke: darkgray;
}

.levelrect.highlighted .scorerect {
    stroke: firebrick;
    stroke-wdith: 2px;
}

.aggrnode line {
    stroke: darkgray;
    fill-opacity: 0.5;
    stroke-dasharray: 5,5;
}

/* mdsview */
.mdslink {
    stroke: gray;
    fill: none;
}

.mdsnode .scorec {
    stroke: 0.5px;
    stroke: darkgray;
}

.mdsaggnode {
    stroke: none;
    fill-opacity: 0.3;
}

.mdsnode.selected .scorec, 
.mdsnode.highlighted .scorec,
.mdsglyph.selected .timecircle,
.mdsglyph.highlighted .timecircle {
    stroke: firebrick;
    stroke-width: 2px;
}

/* featureview */
.fstate {
    stroke: black;
    stroke-width: 1px;
}

.fstate.highlighted {
	stroke: firebrick;
	stroke-width: 2px;
}

.frect {
	stroke: gray;
    stroke-width: 0.5px;
}

.frect:hover {
    stroke: firebrick;
    stroke-width: 1px;
}

.indicator {
	fill: none;
	stroke: black;
    stroke-dasharray: 3,3;
}

/* stateview */
.stateborder {
	fill: white;
	stroke-width: 2px;
}

.stateuser {
	fill: gray;
	fill-opacity: 0.2;
	stroke: black;
	stroke-opacity: 0.4;
}

.stateuser:hover {
    stroke: firebrick;
    stroke-opacity: 1.0;
}

/* tweetview */
.tweetbox {
	width: 450px;
	height: 45px;
	margin: 1px 3px;
	display: inline-block;
	font-size: 10px;
	border-radius: 4px;
	border: solid 1.5px black; 
	overflow: hidden;
}

.tweetbox:hover {
	border: solid 1.5px firebrick;
}

.tweetbox p {
	margin: 2px 3px;
}

.tweettime {
    font-size; 9px;
	font-style: italic;
	color: gray;
}

.tweetbox .twtr-hashtag,
.tweetbox .twtr-hyperlink,
.tweetbox .twtr-atreply {
	text-decoration: none;
    color: #0084B4;
}