/* ===========================================
   Jrole Taihu Navigation  & Widgets Components
   Output  : Uncompressed
   Theme   : Taihu
   Version : 1.7.0
   File    : jui-component-stream-2.0.css
   Author  : Netcomposite @ http://www.netcomposite.com/
*/



/* ===============================
   0. Basic color coding and highlighs
   =============================== */






[data-marker-id="highlight-label-line"] {
        background: #fff;
        color:   #000;
        line-height: 2em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
                

}

[data-marker-id="highlight-label-line"] .jp-ici{
        font-size: 12px !important;
        margin-bottom: 2px !important;
        margin-right: 0.25em;

}

[data-marker-id="highlight-label-line"] var{
        display: inline-block;
        line-height: 2em;
        padding: 0.25em;
        vertical-align: top; 
        color: #000;
        font-size: 0.75em !important;
}

[data-marker-id="highlight-label-definition"] {
        background: #ddd;
        color: #000;

}

[data-marker-id="highlight-label-default"] {
        background: #ddd;
        color:   #404040;

}

[data-marker-id="highlight-label-status"] {
        background: #000;
        color:   #fff;
        text-transform: uppercase;

}

[data-marker-id="highlight-label-neutral"] {
        background:  #34495e;
        color: #fff;

}

[data-marker-id="highlight-label-positive"] {
        background:  #27ae60;
        color: #fff;

}
[data-marker-id="highlight-label-negative"] {
        background:  #c0392b;
        color: #fff;

}
[data-marker-id="highlight-label-deficient"] {
        background: #FFA000;
        color: #fff;

}

[data-marker-id="highlight-label-info"] {
        background: #2196F3;
        color: #fff ;
}

[data-marker-id="highlight-label-action"] {
        background: #263238;
        color: #fff ;
}

[data-marker-id="highlight-label-action"]:hover {
        background: #fff;
        color: #000;
}


[data-marker-id="highlight-label-definition"] {
        background: #ddd;
        color: #404040;

}

[data-marker-id="highlight-label-value"] {
        background:  #7f8c8d;
        color: #fff;

}


[data-label-type="label::joint::defintion"] {
        position: relative;
		border: 1px solid #ddd;
		overflow: hidden;

        margin-right: -2px;
		padding: 0.35em;
		padding-left:0.5em;
		padding-right:0.5em;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
}

[data-label-type="label::joint::value"] {
        position: relative;
		border: 1px solid #ddd;
		border-left: 0px solid #fff;
		box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3) !important;
		overflow: hidden;

    	margin-left: -2px;
		padding: 0.35em;
		padding-left:0.5em;
		padding-right:0.5em;


		-webkit-border-top-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-topright: 4px;
		-moz-border-radius-bottomright: 4px;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;


}



/* ===============================
   1. MASTHEAD  AND HEADERS
   =============================== */


.jp-box-masthead {
        display: block;
        position: relative;
        clear: both;
        vertical-align: middle;
    	width: auto;
        overflow:hidden;
        padding: 0;
        margin: 0;
        text-align: left;
        

}

.jp-box-masthead:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
* html .jp-box-masthead {
        height: 1%;

}


/* MASTHEAD HEADLINE */

.jp-box-masthead-vid {
         display: inline-block;
         position: absolute;
         top: 0;
         left: 0;
         margin: 0.5em;
         padding: 0px;
         background: #fff;
         border: 1px solid #eee;
}

.jp-box-masthead-vid:after{
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
}
 * html .jp-box-masthead-vid {
         height: 1%;
}

.jp-box-masthead-definition dd .jp-nav-badge {
          display: inline-block !important;
          margin-bottom: 0.25em;
}


/* SCALING XLARGE : FOR 64 x 64 vid */

.jp-box-masthead-scale-xlarge  .jp-box-masthead-definition {
          margin: 0;
          padding: 0;
          padding-left: 7.0em;
          margin-bottom: 0.75em;
          min-height: 6em;
}

.jp-box-masthead-scale-xlarge  .jp-box-masthead-definition  dt  {
         line-height: 225%;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;
}

.jp-box-masthead-scale-xlarge  .jp-box-masthead-definition  dd {
         line-height: 225%;
         margin-right: 1em !important; 
         overflow: hidden;

}

.jp-box-masthead-scale-xlarge .jp-box-masthead-definition  dt{
          font-weight: 600;
          font-size: 150%;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;
}



/* SCALING LARGE : FOR 64 x 64 vid */

.jp-box-masthead-scale-large  .jp-box-masthead-definition {
          margin: 0;
          padding: 0;
          padding-left: 7.0em;
          margin-bottom: 0.75em;
          min-height: 6em;
}

.jp-box-masthead-scale-large  .jp-box-masthead-definition  dt  {
         line-height: 225%;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;
}

.jp-box-masthead-scale-large  .jp-box-masthead-definition  dd {
         line-height: 225%;
         margin-right: 1em !important; 
         overflow: hidden;

}

.jp-box-masthead-scale-large .jp-box-masthead-definition  dt{
          font-weight: 600;
          font-size: 150%;
}



/* SCALING DEFAULT : FOR 48 X 48 VID */

.jp-box-masthead-scale-default dl.jp-box-masthead-definition{
          margin: 0;
          padding: 0;
          padding-left: 5em;
          margin-bottom: 0.75em;
          min-height: 5em;
}

.jp-box-masthead-scale-default .jp-box-masthead-definition dt{
         font-size: 130%;
         line-height: 220%;
         font-weight: 600;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;

}

.jp-box-masthead-scale-default .jp-box-masthead-definition dd{
         line-height: 175%;
         font-size: 100%;
         margin-right: 1em !important; 
         overflow: hidden;         
}

.jp-box-masthead-scale-default .jp-box-masthead-wfl-io {
        padding-left: 4.5em !important;      
}

.jp-box-masthead-scale-default .jp-box-masthead-wfl-io input[type="text"] {
        max-width: 375px;   
}



/* SCALING SMALL : FOR 32 X 32 VID */

.jp-box-masthead-scale-small .jp-box-masthead-vid{
         line-height: 100% !important;
         border: none;
}

.jp-box-masthead-scale-small .jp-box-masthead-definition{
          margin: 0;
          padding: 0;
          padding-left: 3.75em;
          margin-bottom: 0.75em;
          min-height: 3.5em;

}

.jp-box-masthead-scale-small .jp-box-masthead-definition dt {
          font-weight: 600;
          font-size: 110%;
          line-height: 220%;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;

 
}

.jp-box-masthead-scale-small .jp-box-masthead-definition  dd{
          line-height: 125%;
          font-size: 90%;         
          margin-right: 1em !important; 
          overflow: hidden;
}


/* SCALING MINI :  FOR 16 x 16  VID */

.jp-box-masthead-scale-mini .jp-box-masthead-vid{
         line-height: 100% !important;
         border: none;
}
.jp-box-masthead-scale-mini .jp-box-masthead-definition{
          margin: 0;
          padding: 0;
          padding-left: 2.2em;
          margin-bottom: 0.75em;
          min-height: 3.0em;

}

.jp-box-masthead-scale-mini .jp-box-masthead-definition dt {
          font-weight: 600;
          font-size: 100%;
          line-height: 240%;
          text-overflow: ellipsis !important;
          overflow: hidden;
          padding-right: 2em;
          white-space: nowrap;
}

.jp-box-masthead-scale-mini .jp-box-masthead-definition  dd{
         line-height: 125%;
          font-size: 80%;         
         margin-right: 0.5em !important; 
         overflow: hidden;
}



.jp-box-masthead-controls {
         /* float:left;
          clear: left; */
          position: absolute;
          top: 1px;
          right: 0;
          padding: 0.5em;
	  margin: auto;
	  white-space: nowrap;
          overflow: hidden;
}




/* ===============================
   2. Basic card layout and elements
   =============================== */



.jp-grid .jp-story-tile,
.jp-grid .jp-story-card {
             box-shadow: none;
             border: none;
            -moz-box-shadow:  none;
            -webkit-box-shadow: none;

}

.jp-story-tile,
.jp-story-card {
           display: block;
           padding: 0;
           margin: 0;
           position: relative;
           clear: both; 
         /* skinning below this line */  


              border: #dcdcdc solid 1px;

             background: #fff;
             color: #212121;
             box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);
            -moz-box-shadow:  0px 1px 2px rgba(0, 0, 0, 0.24);
            -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);
} 

.jp-story-preview-body {
            padding: 1em;
}


.jp-story-preview-body p {
            line-height: 1.75em;
}

.jp-story-preview-media img {
            width: 100%;

}


.jp-story-tile a {
           text-decoration: none;
           display: block;
           position: relative;
           clear: both; 
           color: inherit;
} 



.jp-story-keyline-vid-small {
          padding-left: 24px;
          line-height:  1.25em;
          min-height: 1.5em;
          display: block;
}
.jp-story-keyline-vid-default {
          padding-left: 40px;
          line-height:  1.25em;
          min-height: 4em;
          display: block;
}
 


.jp-story-keyline-vid-medium .jp-story-item-type-dataset{
          padding-left: 3.5em;
          line-height: 150%;           
}

.jp-story-keyline-vid-large .jp-story-item-type-dataset{
          padding-left: 4.5em;
          line-height: 180%;           
}

.jp-story-keyline-vid-xlarge .jp-story-item-type-dataset{
          padding-left: 7.0em;
          line-height: 200%;
          min-height: 7.0em;
}

.jp-story-type-vid {
	 display: inline-block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 margin: 0.5em;

	 padding: 0px;
	 border: 1px solid #eee;
}

.jp-story-type-vid:after{
         content: ".";  
         display: block;  
         height: 0; 
         clear: both; 
         visibility: hidden; 
}
 * html .jp-story-type-vid {
         height: 1%;
}

.jp-story-type-sup {
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 height: 100%;
	 padding: 0.5em;
	/* background: #eee; */
	/* width: 40px; */
	 text-align:right;
	 padding-left: 2em;
      /*   background:rgba(255,255,255,0.5); */
         border: 0px solid #0000ff;

  background: rgba(255,255,255,0.5);
background: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.65) 30%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.5)), color-stop(30%, rgba(246,246,246,0.65)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.65) 30%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.65) 30%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.65) 30%, rgba(237,237,237,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(246,246,246,0.65) 30%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
 

}



.jp-story-item-type-dataset {
         padding: 0.5em;
         border: 0px solid #ff0000;
         margin-right: 40px;
} 
.jp-story-item-type-dataset dt {
         font-size: 120%;
         white-space: normal;
 	 text-overflow: ellipsis !important;
         overflow: hidden;
         max-height: 4em;
         white-space: nowrap;
} 

.jp-story-item-type-dataset dt em {
         display: block; 
         font-size: 80%; 
         padding:0;
         margin: 0;

    opacity: .85 !important;
    -moz-opacity: .85 !important;
    filter: alpha(opacity=85) !important;
} 



.jp-story-item-type-dataset dd  {
         padding-top: 0.25em;
         padding-bottom: 0.25em;
}


.jp-story-item-type-dataset dd .jp-bu-panel{
         padding-top: 0.5em;
         padding-bottom: 0.5em;
}

.jp-story-item-header {
         font-weight: normal;
         font-size: 125%;
  }    

.jp-story-stub-anchor {      
         color:  #0066cc;
         display: inline-block;
         /* font-weight: 600; */ 
        /* border-bottom: 1px dotted #0066cc !important; */
        /* #3F51B5 */
}

.jp-story-type-vid {
 
 	vertical-align: top;
  	background: transparent;
 	overflow: hidden;
}



.jp-story-cover {
        position: relative;
        border: 10px solid #f6f6f6;
        background-position:50% 50%;
        background-repeat:no-repeat; 
        background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        min-height: 150px;
        clear: both !important;
        padding: 0 !important;

}

.jp-story-cover img {
        display: block;
        width: 100%;

}

.jp-story-cover .jp-wfl-ip{
       margin: 0 !important;

}


.jp-story {
           display: block;
           position: relative;
           clear: both; 
} 

.jp-story a {
           text-decoration: none;
} 

.jp-story-header {
           display: block;
           position: relative;
           clear: both; 
           width: auto;
           vertical-align: middle;  
                     color: #000;

/* move to scaling */           
           padding: 0.5em;
           padding-left: 3.5em;
           padding-right: 1em;

            border-top: 0px dotted #ddd;
           
/* move to skinning */
           background: #fff;
           
          
}

.jp-story-header .jp-story-vid {
         /* float:left; 
          clear: left; */
          position: absolute;
          top: 0.8em;
	  left: 0.5em;
	  margin: auto;	
	  padding: 0;
	  white-space: nowrap;
          overflow: hidden;

/* move to skinning */
       

          
          border: 0px solid #ddd;
}
.jp-story-header .jp-story-controls {
         /* float:left; 
          clear: left; */
          position: absolute;
          top: 0;
          right: 0;
          padding: 0.5em;
	  margin: auto;	
	  white-space: nowrap;
          overflow: hidden;

}
.jp-story-header:after {
          content: ".";  
          display: block;  
          height: 0; 
          clear: both; 
          visibility: hidden; 
}
* html .jp-story-header {
         height: 1%;

}

.jp-story-event {    
        padding: 0.5em;
        padding-left: 3.5em;    
        padding-right: 1.5em;
        background: #fff;
        /* border: 1px solid #000; */
}

.jp-story-byline {

         display: block; 
         color: #666; 
         font-size:90%;
}
.jp-story-event p {    
        padding-bottom: 1.5em;
        color: #000;
        /* border: 1px solid #000; */
}


.jp-story-event .jp-story-card {    
        border: none !important;
        box-shadow: none !important;

}

.jp-story-engagement{
        padding: 0.5em;
        padding-left: 3.5em;
        background: #fff;
}
.jp-story-engagement a {
        font-size: 90%;
        padding-right: 0.8em;
        color: #666;
      /*  color: #3D6B88 */

}
.jp-story-interactions{
        background: #fff;
      padding: 0.5em;
        padding-left: 3.5em;    
        padding-right: 1.5em;
}


.jp-story-timestamp {
         display: block; 
         color: #666; 
         font-size:80%;
 
}



/* ===============================
   2. Display density
   =============================== */

.jp-stream-density-compact .jp-story-vid {
          top: 0.35em;
	  left: 0.25em;
}
   
.jp-stream-density-compact .jp-story-header {
	  padding-left: 2em !important;
}


/* ===============================
   2. Basic stream layout and elements
   =============================== */
   

/* ===============================
   3. Basic stream layout and elements
   =============================== */   



/* ===============================
   4. Stream display formats
   =============================== */