body {
    background-color: #ffffff;
    color: black;
}

/* Landing page */

.container .jumbotron {
	margin-top: 25px;
	margin-bottom: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #F0ECDD;
}

.jumbotron h1 {
	padding-top: 15px;
	margin-bottom: 0px;
	font-family: 'Exo', sans-serif;
	color: #9C4590;
}

.jumbotron h1 a:link, a:visited, a:hover, a:active {
	color: #9C4590;
	text-decoration: none;
}

.jumbotron h2 {
	color: #F26666;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 0px;
	padding-bottom: 10px;
/* 	color:#E06F62;  */
/*  color: #139694; */
}

.jumbotron img {
	float:right; 
	width:200px; 
	padding-top:20px; 
	margin-right:30px;
}

.jumbotron button {
	background-color : #9C4590;
	color: #FFFFFF;
}


.jumbotron button:hover, button:active  {
	color: #FFFFFF;
	background-color : #B76DAE;
}

#error {
	text-align: center;
	background: #D44A31;
	color: #FFFFFF;
	font: 24px Helvetica, Sans-Serif;
	border-radius: 8px;
}
#error a:hover, #error a:link, #error a:visited {
	text-decoration: underline;
	color: #ffffff;
}

.row {
	margin: 10px 0px;
}

.row.middle {
	padding: 10px 5px;
}

.row.bottom {
	margin-top: 25px;
	padding: 10px 5px;
}

.container .abstract {
	margin-top: 60px;
	/*border: 1px solid #9C4590;
	border-radius: 10px;*/
}

.container .selector {
	width: 100%;
	padding: 10px;
	border: 1px solid #9C4590;
	background-color: #9C4590;
	border-radius: 10px;
}

.container .rqbox {
	background-color: #EDDDC7;
	border-radius: 5px;
	padding: 20px;
}

.container .rqbox h3 {
	color: #9C4590;
	font-size: 2.0em;
}

.container .rqbox  p {
	font-size: 1.1em;
}

.container .rqbox  img {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 75%;
}

.container .rqbox h3 img {
	vertical-align: middle;
	width: 14px;
}

.container .ribbon {
	position: relative;
	left: 25%;
	width: 50%;
	color: #ffffff;
	background: #9C4590;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: center;
	font-size: 0.85em;
}

.selector .caption {
	color: #FFFFFF;
	margin-left: 15px;
	font: 12px Helvetica, Sans-Serif;
	font-size: 0.9em;
	margin-bottom: 20px;
}

.selector button {
	margin-top: 15px;
	background-color: #FFFFFF; 
	color: #9C4590;
	font-size: 1.2em;
}

.projectselection {
	clear:both;
	margin: 0px 15px 20px 15px;
}

.projectheadline {
	width:230px;
	margin: 0px auto;
}
.projectheadline h2 {
	text-align:center;
	color: #FFFFFF;
	margin-left: 15px;
	font-size: 1.5em;
	float: left;
}

.projectheadline img {
	margin: 25px 0px 0px 10px;
}

#pcombobox {
	margin: 0px auto;
}

.helptooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 15px 10px 5px 15px;
        background-color: #F0ECDD;
        border: solid 1px #9C4590;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
 }

.helptooltip p {
	font-size: 12px;
}

.helptooltipvis {
    position: absolute;
    width: 550px;
    height: auto;
    padding: 15px 10px 5px 15px;
    background-color: #F0ECDD;
    border: solid 1px #9C4590;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
 }

.helptooltipvis img {
	margin-top: 10px;
	margin-bottom: 10px;
	vertical-align: middle;
	text-align: center;
    border: solid 1px #9C4590;
}

.abstract h2 {
	color: #F26666;
	font-size: 2.5em;
}

.abstract h3 {
	color: #9C4590;
	margin-top: 0px;
	font-size: 1.5em;
	font-style: italic;
}

/* footer */
footer {
	background-color: #F0ECDD;
  	margin-top: 25px;
  	margin-bottom: 25px;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	border-radius: 5px;
	color: #9C4590;
}

footer a:link, footer a:visited, footer a:hover, footer a:active {
  color: #F26666;
  text-decoration: underline;
}

footer p {
  margin-bottom: 0px;
}

/* project page */

.project {
	font-size: 2.6em;
	color: #9C4590;
	padding: 15px 0px 10px 15px;
	border: 1px solid #EDDDC7;
	background-color: #EDDDC7;
	border-radius: 10px;
	margin: 20px 0px;
}

#projectsummary {
	font-size: 1.35em;
	color: #9C4590;
	padding: 20px;
	text-align:center;
	background-color:#F0ECDD;
	border-radius: 10px;
	margin: 10px 0px;
}

#projectsummary span {
	font-weight: bold;
}

.leftcol {
	color: black;
	padding: 20px;
	border: 1px solid #F0ECDD;
	background-color: #F0ECDD;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.leftcol h2 {
	color: #9C4590;
	margin-top : 0px;
	font-size: 2em;
}

.leftcol button {
	margin-left: 10px;
	background-color: #9C4590; 
	color: #FFFFFF;
	font-size: 1.2em;
}


.leftcol button:hover, button:active, {
	color: #FFFFFF;
	background-color : #B76DAE;
	border-color: #B76DAE;
}

.legend {
	min-height: 80px;
	width: 100%;
	margin-top: 30px;
	background: #FFFFFF;
	border: 1px solid #9C4590;
	border-radius: 10px;
	padding: 10px;
}

.legenditem {
	height: 16px;
	width: 100%;
	padding: 10px;	
	display:inline-block;
}

.legenditem img {
	float: left;
	margin-right: 10px;
}

.legenditem p {
}


.rightcol {
	padding: 20px;
	border: 1px solid #F0ECDD;
	background-color: #F0ECDD;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-bottom: 20px;
}

.zoomicon {
	padding:20px;
}

#homeicon {
	float:left;
	width: 10%;
	margin-top: 20px;
}

#homeicon img {
	float: right;
}

#projectName {
	float:left;
	width: 90%;
	margin-top: 15px;
}

.rq1 {
	width: 718px;
	height: 600;
	border: 2px solid gray;
	border-radius: 5px;
	background-color: #FFFFFF;
}

#rq1svg{
	z-index:1;
}

.rq2 {
    width: 718px;
	height: 600;
	border: 2px solid gray;
	border-radius: 5px; 
	background-color: #FFFFFF;
}

.rq2 .nodeText {
	font: bold 12px Helvetica, Sans-Serif;
	font-color: DimGray;
}

.rq3 {
	width: 718px;
	height: 400px;
	border: 2px solid gray;
	border-radius: 5px; 
	background-color: #FFFFFF;
}

#lcombobox, #rq3lcombobox {
	float: left;	
}

.outlierdiv {
	width: 200px;
	padding: 10px 0px;
}

#outlierscheck {
	width: 15px;
	height: 15px;
	float: left;
	margin-right: 5px;
}

.outlierdiv p {
	margin-top: 2px;
}

#labelselection {
	width:1000px;
	margin: 30px auto;
}

#rq3labelselection {
	width:1200px;
	margin: 30px auto 0px;
}

#projectselection .button, #labelselection .button, #rq3labelselection .button {
	margin-left: 15px;
}

.noselmsg {
	width: 200px;
	margin: 5px;
	font: 12px Helvetica, Sans-Serif;
	color: #9C4590;	
}

.msj {
	font: bold 14px Helvetica, Sans-Serif;
	width:800px;
	margin: 30px auto 0px;
    color: gray;
}

/* div.tooltip {    */
/*   position: absolute;            */
/*   text-align: center;            */
/*   width: 60px;                   */
/*   height: 28px;                  */
/*   padding: 2px;              */
/*   font: 12px sans-serif;         */
/*   background: lightsteelblue;    */
/*   border: 0px;       */
/*   border-radius: 8px;            */
/*   pointer-events: none;          */
/* } */

.rq2 .textbox {
	fill: #FFFFFF;
	stroke: #9C4590;
	stroke-width: 2px;
}

.rq2 .labeltext {
	font: bold 14px Helvetica, Sans-Serif;
	fill: #424242;
}

.rq2 .labelnode circle {
/* 	stroke: #A6A9AD; */
/* 	stroke: #FFFFFF; */
 	stroke-width:2px; 
}

.rq1 text.labelText {
	font: bold 12px Helvetica, Sans-Serif;
	fill: DimGray;
}

.tooltip {
  position: absolute;
  text-align: center;
  width: 175px;
  height: 50px;
  font-size: 1em;
  background-color: #F0ECDD;
  border: solid 2px #9C4590;
  border-radius: 8px;
  pointer-events: none;
}

.tooltip p {
	margin-top: 3px;
	margin-bottom: 0px;
}

.rq2tooltip, .labeltooltip {
  position: absolute;
  width: 150px;
  font-size: 12px;
  background-color: #F0ECDD;
  border: solid 2px #9C4590;
  border-radius: 8px;
  pointer-events: none;
  padding-bottom: 5px;
}

.rq2labeltooltip {
  position: absolute;
  font-size: 12px;
  background-color: #F0ECDD;
  border: solid 2px #9C4590;
  border-radius: 8px;
  pointer-events: none;
  padding: 0px 10px;
}

.rq2tooltip p, .labeltooltip p {
	margin: 5px 0px 0px 10px;	
}

.rq2labeltooltip p {
	margin:5px 0px 5px 0px;
	font-weight: bold;
	text-align: center;
}

.tooltiptext span {
	font-weight: bold;
}
#affixBox.affix-top {
    position: static;
  	margin-top:0px;
  	width:228px;
}
  
#affixBox.affix {
    position: fixed;
    top:180px;
    right: 190px;
    width:170px;
    z-index: 5;
}

.surveyBox {
	background-color: #9C4590;
	color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
}

.surveyBox p {
	margin-bottom: 5px;
	margin-top: 5px;
	font-size: 1em;
}

.surveyBox a, .surveyBox a:hover, .surveyBox a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

.landingSurveyBox {
	margin-top: 10px;
	background-color: #9C4590;
	color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
}

.landingSurveyBox p {
	margin-bottom: 5px;
	margin-top: 5px;
	font-size: 1.2em;
}

.landingSurveyBox a, .landingSurveyBox a:hover, .landingSurveyBox a:visited {
	text-decoration: underline;
	color: #FFFFFF;
}