/* table.table-transition td { */
/*     -webkit-transition: all 0.2s ease-out; */
/*     -moz-transition: all 0.2s ease-out; */
/*     -o-transition: all 0.2s ease-out; */
/*     transition: all 0.2s ease-out;} */


button:focus {outline:0 !important;}

html {
    height:100%
}

body {
    /* padding-bottom: 70px; */
    font-size:16px;
    height: 100%;
    transition: all 0.5s ease-out;
    /* text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); */
 /* because the bottom navbar takes space */

     }

.small-container {
    max-width: 750px;/* 586px; */
    }

.main-container {
    padding-top: 50px;
    height: 100%;
    position:relative;
    }

.big {
    font-size: 1.2em;}

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -100px; 
  height: 100px; 
  visibility: hidden; 
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.shadow {
    -webkit-filter: drop-shadow( -1px -1px 1px #555 );
    filter: drop-shadow( -1px -1px 1px #555 );
}

.large-shadow {
    -webkit-filter: drop-shadow( -1px -1px 3px #555 );
    filter: drop-shadow( -1px -1px 3px #555 );
}

.drop-shadow {
    box-shadow: 3px 3px 5px rgba(0,0,0,.3);}

.home-heading {
max-width: 100%;
padding: 0.5em;
margin: 0em 0.625em;
background-color: rgba(43,44,44,0.9);
border-top: 1px solid #777;
border-bottom: 1px solid #222;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
zoom: 1;
}

/* because the old jumbotron was more interesting */


.jumbo, .jumbo-bottom {
    position: relative;
    padding: 40px 0;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,.3);
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.6), inset 0 -3px 10px rgba(0,0,0,0.6);
    /* filter: blur(5px); */
    /* background: url(../images/city-view-small.jpg); */
    background: url(../images/picjumbo.com_IMG_6253_small.jpg);
    background-position:center; 
    background-size:  cover;}

.jumbo-alt {
    background: url(../images/city-view-small.jpg);
    background-position:center; 
    background-size:  cover;}


.jumbo-alt2 {
    background: url(../images/graphivac-bg.png);
    background-position:center; 
    background-size:  cover;}


.jumbo-bottom {
    background: url(../images/picjumbo.com_IMG_6253_small.jpg);
    background-position:bottom; 
    background-size:  cover;}

.jumbo-top {
    background: url(../images/picjumbo.com_IMG_6253_small.jpg);
    background-position:top; 
    background-size:  cover;}



/* .jumbotron, .gradient-bg{ */
/*     position: relative; */
/*   padding: 10px 0; */
/*   color: #fff; */
/*   text-align: center; */
/*   text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); */
/*   background: #020031; /\* Old browsers *\/ */
/*   background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /\* FF3.6+ *\/ */
/*   background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /\* Chrome,Safari4+ *\/ */
/*   background: url(../images/escheresque_ste-trans.png) repeat center center,  */
/*   linear-gradient(45deg,  #020031 0%,#6d3353 100%); /\* W3C *\/ */
/*   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /\* IE6-9 fallback on horizontal gradient *\/ */
/*   box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); */
/* } */


.jumbotron {
  position: relative;
  padding: 40px 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    background-color: #18ABB1;
    background: url(../images/gplaypattern-trans.png) repeat center center ,linear-gradient(45deg, #3366CC, #1abdbf);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}

.message {
    position: fixed; 
    top: 70px;
    left: 1em;
    min-width: 10em;
    z-index: 15;}

/* .jumbotron2:after { */
/*   content: ''; */
/*   display: block; */
/*   position: absolute; */
/*   top: 0; */
/*   right: 0; */
/*   bottom: 0; */
/*   left: 0; */

/*   opacity: .4; */
/* } */


.ribbon-wrapper-green {
  width: 350px;
  height: 350px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: 0px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #172F2C;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -50px;
  top: 70px;
  width: 600px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
    box-shadow: rgba(25, 22, 22, 1) 0px 3px 15px; 
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}


.hidden {
    opacity: 0.2;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

.hidden:hover, .hidden:focus, .hidden:active {
    opacity: 1
}


.invisible {
    opacity: 0;
    }



.cut-out {
    box-shadow: 0 1px 0 rgba(119,152,152,.2), 1px 0 0 rgba(119,152,152,.2), inset rgba(25, 22, 22, 0.5) 2px 2px 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* border-top: 1px solid #622E50; */
    /* border-left: 1px solid #622E50; */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 98%, rgba(0,0,0,0.05) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(98%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.05))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.05) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.05) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.05) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.05) 98%,rgba(0,0,0,0.05) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#0d000000',GradientType=0 ); /* IE6-9 */
    padding: 1em;
}









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

.o-container {
    margin-left:  10px;
    margin-right: 10px;}


.tab-drop-target {
    opacity: 0;
    /* width: 20px; */
}

.tab-drop-target > a {
    margin-left: -15px;
    /* padding-left: 50px !important; */
}


.tab-anim-over {
    padding-left: 90px !important;
}

.nav.nav-tabs * {transition: all 0.2s ease-out;}

/* .tab-close { */
/*     max-width:0px; */
/*     overflow:hidden; */
/*     box-sizing:border-box; */
/*     border-radius:2px; */
/*     display:inline-block;} */

/* li:hover .tab-close { margin-left: 5px; */
/* 		padding: 0 0.8em;} */

/* .tab-close.close {cursor: auto;} /\*override the bootstrap style*\/ */


/* WHILE BEING CLICKED */
.btn:active, .nav-pills > li a:active, .dropdown-menu > li > a:active, .nav-tabs > li > a:active, .btn.active {
    /* border: 1px solid grey; */

    color: #adb2b2;
}



.hide-overflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    white-space: normal;
}

.no-padding, .no-padding * {
   padding: 0 !important;
   margin: 0 !important;
}

/* .panel-toggle:after { */
/*     /\* symbol for "opening" panels *\/ */
/*     font-family: 'Glyphicons Halflings';  /\* essential for enabling glyphicon *\/ */
/*     content: "\e114";    /\* adjust as needed, taken from bootstrap.css *\/ */
/*     float: right;        /\* adjust as needed *\/ */
/*     color: grey;         /\* adjust as needed *\/ */
/* } */
/* .panel-toggle.collapsed:after { */
/*     /\* symbol for "collapsed" panels *\/ */
/*     content: "\e080";    /\* adjust as needed, taken from bootstrap.css *\/ */
/* } */


.panel {
    box-shadow:  -2px 3px 3px -2px rgba(0, 0, 0, 0.5);
    }



.hover-glow {
    transition: box-shadow 0.5s ease-out, border 0.5s ease-out;

}

.hover-glow:hover, .glow {
    box-shadow: 0 0 15px rgba(24, 173, 180, 0.5);
    border: 1px solid rgba(24, 173, 180, 0.5);
}


/* .navbar-fixed-bottom { */
/*     box-shadow:  0px 0px 15px 3px rgba(0, 0, 0, 0.25); */
/*     } */


/* tr:not(.empty) td { */
/*     box-shadow: 0 -4px 4px -3px rgba(0, 0, 0, 0.5) inset; */
/* } */
/* tr:not(.empty) td:first-child { */
/*     border-radius: 5px 0 0 5px; */
/*     box-shadow: 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset; */
/* } */
/* tr:not(.empty) td:last-child { */
/*     border-radius: 0 5px 5px 0; */
/*     box-shadow: 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset; */
/* } */

.select-none {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/*==================================================*/
/*  Flotr - Envision                                */
/*==================================================*/

.analog-binary {
    padding-top: 1em;
    border: 1px solid grey;
    background: rgba(200,200,200,0.08);
    border-bottom: none;
    padding-left: 0.5em;
    padding-right: 0.5em;
    box-shadow: inset rgba(25, 22, 22, 0.2) 3px 3px 13px;   
}

.envision-first {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.envision-visualization {

    padding: 1em;
}

.flotr-handles-handle {
  background: white;
/*  border: 1px solid black; */
  border: 1px solid grey;
  position: absolute;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset rgba(25, 22, 22, 0.5) 0px -1px 3px, rgba(10, 10, 10, 0.5) 0px 2px 7px; 
}

.flotr-handles-handle,
.flotr-grid-label {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.flotr-handles-drag {
  height: 2em;
  width: 0.75em;
  z-index: 10;
}
.flotr-handles-scroll {
  height: 1.5em;
  cursor: move;
  z-index: 11;
}


.flotr-handles-left {
  cursor: w-resize;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.flotr-handles-right {
  cursor: e-resize;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.envision-timeseries {
  width: auto;
}


.envision-timeseries-summary .envision-component {
  cursor: col-resize;
  height: 80px;
  box-shadow: inset rgba(25, 22, 22, 0.2) 3px 3px 13px;
  border-radius: 3px;
  border: 1px solid grey;
}

.envision-timeseries-summary {
    margin-left: -1px;
    margin-right: -1px;
    background: rgba(200,200,200,0.08);
    }

/* Connection overlay */
.envision-timeseries-connection canvas {
  z-index: 10;

}
.envision-timeseries-connection canvas object {
  position: absolute;
  top: 0px;
}

.envision-timeseries-connection .envision-component {
  height: 2em;}




/* Boostrap dropdown on hover */
@media only screen and (min-width : 768px) {
    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}




.arrow_box {
	position: relative;
	background: #88b7d5;
	color: black;
	border: 4px solid #3366CC;
	border-radius: 4px;
	margin: 1em;
	padding-right: 1em;
	padding-left: 1em;
	display: inline-block;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(51, 102, 204, 0);
	border-top-color: #3366CC;
	border-width: 36px;
	margin-left: -36px;
}



/* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
.no-touch-pan {
    ms-touch-action: none;
    touch-action: none;
}


.link-dropzone {
    display: inline-block;
    width: 80%;
    height: 75px;
    border: 2px dashed #3366CC;
    border-radius: 8px;
    margin: 10px;
    transition: all .2s ease-in-out;
}

.link-draggable {
    border: 1px solid grey;
    border-radius: 8px;
    display: inline-block;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}


.link-draggable:before {
    content: "\f0c1";
    font-family: FontAwesome;
    color: #3366CC;
    font-size: 45px;

    line-height: 65px;
}

.link-draggable:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.top-container {
    top: 70px;
    margin-top:0px;
}

.wiki-link {
    background-color: #F1F1F1;
    border-radius: 5px;
    padding: 10px;
    color: #2952a3;
}

.featured-logo {
    background-color: white;
    display: inline-block;
    padding: 0.5em;
    margin: 2px;
    width: 10em;
}


.compatible {
    background-color: white;
    border-radius: 3px;
    padding: 5px;
    margin-bottom:5px;
}