@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/qpy-UiLNKP-VfOdbcs6r6-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

.logo1 {
	width: 226px;
	height: 206px;
	background: url("../Interactive_Treatment_Guide_files/flow.jpg") no-repeat;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.arrow_r1r2_straight {
  width: 64px;
  height: 82px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -359px -316px;
}

/*TODO: Fix this one*/
.arrow_r1r2_left_down {
  width: 64px;
  height: 97px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -463px -304px;
}

.arrow_r1r2_right_down1 {
  width: 66px;
  height: 82px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -566px -479px;
}

.arrow_r1r2_right_down2 {
  width: 200px;
  height: 82px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -432px -479px;
}

.arrow_r1r2_right_spout {
  width: 26px;
  height: 71px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -403px -555px;
}

.arrow_right_spout {
  width: 26px;
  height: 71px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -404px -553px;
}

.arrow_left_spout {
  width: 26px;
  height: 71px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -358px -553px;
  /*border-style: solid;
  border-width: 1px;*/
}

.arrow_right_down {
  width: 66px;
  height: 82px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -566px -479px;
  /*border-style: solid;
  border-width: 1px;*/
}

.arrow_left_down {
  width: 66px;
  height: 82px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -154px -479px;
  /*border-style: solid;
  border-width: 1px;*/
}

.arrow_down {
  width: 66px;
  height: 125px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -359px -274px;
  /*border-style: solid;
  border-width: 1px;*/
}

.arrow_connector {
  width: 90px;
  height: 20px;
  position:absolute;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -0px -245px;
  /*border-style: solid;
  border-width: 1px;*/
}

.arrow_r1r2_right_connector {
  width: 90px;
  height: 71px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -433px -555px;
}

.arrow_r1r2_right_connector_pipe {
  width: 164px;
  height: 71px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -403px -555px;
}

/*
.arrow_r1r2_left_down {
  width: 64px;
  height: 97px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -463px -304px;
}

.arrow_r1r2_right_down {
  width: 64px;
  height: 97px;
  background: url("../images/arrows-graphics-sprites.png") no-repeat -569px -301px;
}
*/

.header-circle {
  width:100%;
  border-radius:50%;
  text-align:center;
  color:#fff;
  position:relative;
}

.circle {
	width:90%;
	border-radius:50%;
	text-align:center;
  color:#fff;
	position:absolute;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  cursor: pointer;
}

.circle:before{
	content:" ";
	float:left;
	height:0;
	width:0px;
	margin:100% 0 0;	
}

.rounded {
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	width: 45%;
	height: 220px;
	margin-top: 11%;
  margin-bottom: 11%;
	padding: 4% 0 12% 0;
  color:#fff;
  border-style: solid;
  border-width: 1px;
  border-color: white;
}


.container{
  max-width: none !important;
  width: 970px;
}

.interact {
  /*border: 0;*/
  color: white;
  /*margin-bottom: 10px;*/
}
  
/*  adding extra space at the top of the row divs to look more like the design */ 
 .spaced {
	 margin-top: 5%;
 }

.spaced_3rdrow {
   margin-top: 8%;
 }
 
 .spaced_footer {
   margin-top: 3%;
 }

.vcenter {
	margin-top: 7%;
}

/* Fix for spacing issues on last row of green bubbles */
.tight {padding: 7px;}

/* Middle align the text in the green bubbles */

/*
button.green {
	position: relative;
}

button.green h3 {
	 display: table-cell; 
  vertical-align: middle; 
}
*/

/*
.row .spaced .last {
	margin-top: 70px;
}
*/

/* ==========================================================================
   Styling for left for objects
   ========================================================================== */

.description {
	font-family: Arial, Helvetica, sans-serif;
	color:#4D4D4D;
}

.description .lead {
	margin-bottom: 0px;
	font-size: 1.15em;
	font-weight: bold;
}

.description p{
	line-height: 1.2em;
}

.numbers {
	width: 69px;
	height: 69px;
	margin: 6% 21%;
}

.numbers h2 {
	font-weight: normal;
	padding-top: 24%;	
	color: white;
}


/* ==========================================================================
   Colors for objects
   ========================================================================== */
   
   .orange {
	   background: #216678;
   }
   
   .orangetxt {
	   color:#216678;
   }

   .red {
	   background: #288ba3;
   }
   
   .redtxt {
	   color:#216678;
   }
   
   .green {
	   background: #216678;
   }
   
   .greentxt {
	   color: #216678;
   }

   
   
/* ==========================================================================
   Circle Text Styling
   ========================================================================== */
   
  .interact h3 {
	margin-top: 9%;
	font-size: 185%;
	font-family: 'Oswald', sans-serif;
	font-weight: lighter;
	line-height: 115%;
	letter-spacing: 0.009em;
  }
  
  .interact p {
	  font-family: CiscoSansTT;
	  font-size: 12pt;
	  font-weight: lighter;
	  width: 190px;
	  margin: 0 auto;
  }
  
  .interact h3.moretxt { font-size: 1.6em;
	  font-family: 'Oswald', sans-serif;
	  font-weight: lighter;
	  line-height: 130%;
	  }
  
/* ==========================================================================
   Title Text Styling
   ========================================================================== */
   
   h1.title1 {
	   font-size: 3em;
   }
   
   h1.title2 {
	   margin-top: -14px;
   }
   
   h1 span.blowup1 {
	   font-size: 1.4em;
   }
   
    h1 span.blowup2 {
	   font-size: 1.8em;
	   line-height: 1em;
   }
  
  
/* ==========================================================================
   Interactive Styling
   ========================================================================== */
	   
.interact .link {
	width: 61%;
	margin: auto;
	bottom: -4px;
	position: relative;
}

.interact a {
	/* border: 1px solid rgba(0,0,0,0); */
	color: #fff;
	font-size: 1.1em;
	font-weight: lighter;
	display: block;
	letter-spacing: .04em;
}

.interact a span {
	letter-spacing: .15em;
	font-size: 1.14em;
}

.interact a:hover {
	text-decoration: none;
	/* border: dotted 1px white; */
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: rgba(0,0,0,0.25);
}




.position {
	position: absolute;
	top: 110px;
}

.position .link {
	width: 61%;
	margin: auto;
	bottom: -4px;
	position: absolute;
}

.position a {
	/* border: 1px solid rgba(0,0,0,0); */
	color: #fff;
	font-size: 1.1em;
	font-weight: lighter;
	display: block;
	letter-spacing: .04em;
}

.position a span {
	letter-spacing: .15em;
	font-size: 1.14em;
}

.position a:hover {
	text-decoration: none;
	/* border: dotted 1px white; */
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: rgba(0,0,0,0.25);
}





.interact .green a {

	font-size: 1em;

}

.interact .green .link {
	width: 70%;
	bottom: 17%;
	position: absolute;
	right: 14%;
}

.interact .green h3{
	font-size: 175%;
}

.interact .green h3 span { display:inline-block; vertical-align:middle }




/*--------------------------------------*/   
/*          Definition Styles           */
/*--------------------------------------*/    

.interact span.btn {
	border: dotted 1px white;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 1% 3%;
}

.interact span.btn:hover {
	color: #fff;
	background: #6ec6d1;
	/* background: rgba(0,0,0,0.25); */
	border: 1px solid rgba(255,255,255,1);
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
	}


/* ==========================================================================
   Styling for Footer objects
   ========================================================================== */
   
.footer {
	padding-bottom: 55px;
}

.footer .spaced {
	margin-top: 2%;
}

.footer button {
	height: 60px;
	font-weight: lighter;
	margin-left: 8%;
}

.footer #main_header { 
  color: white;
}

.footer #main_content { 
  color: white;
}


.glyphicon-log-in {
	rotation: 90deg;
}

.thumb {
	width: 176px;
	height: 179px;
	background: url("../images/arrows-graphics-sprites.png") no-repeat -111px -750px;
}
.footer h1 {
	color: white;
}

.columns {
	width:100%;
	-moz-column-count: 2;
	-moz-column-gap: 15px;
	-webkit-column-count: 2;
	-webkit-column-gap: 15px;
	column-count: 2;
	column-gap: 15px;
}

.columns p {
  color: #FFF;
   font-family: Arial, Helvetica, CiscoSansTT;
   font-size: 1.13em;
   font-weight: normal;
}

modal-dialogue {
	width: 700px;
}

/* ==========================================================================
   Styling for Lightbox Player
   ========================================================================== */
   
  #colorbox/*  .player */.container{
	   background: #e6e6e6;
	   padding: 0;
	   margin: 0;
   }

/*
   .nivo-lightbox-content iframe {
   padding: 0;
   width: 830px;
   }
*/
   
#colorbox .container  {
	   width: 815px;
	   padding: 0;
	   background: #e6e6e6;
	   padding-bottom: 10px;
   }
   
#colorbox .row  {
	   width: 815px;
	   padding: 0;
	   background: #e6e6e6;
	   padding-bottom: 10px;
   }
/*
   
#colorbox.player .columns p {
	color: #4d4d4d;
	font-size: 1em;
}
*/

#colorbox/* .player */ .columns {
	width:67%;
	margin-top: 18px;
	height: 100%;
	overflow: hidden;
}

#colorbox /* .player */ h1 {
  font-family:CiscoSansTT;
  font-size: 2.0em;
  text-align: center;
  font-weight: normal;
  padding-left: 10px;
  width: 220px;
}

/* ==========================================================================
   Styling for Tootip
   ========================================================================== */ 



.popover-title {
  background-color: #6ec6d1;
  border-bottom: 1px solid #89c4cc;
  border-top: 1px solid #233638;
  color:#fff;
  font-size: 1.5em;
  border-radius: 0px 0px 0 0;
  line-height: 1.2em;
}

.popover.top {
  margin-top: -17px;
}
.popover.right {
  margin-left: 17px;
}
.popover.bottom {
  margin-top: 17px;
}
.popover.left {
  margin-left: -17px;
}

.popover.top .arrow {
  border-top-color: #4d4d4d;
}
.popover.top .arrow:after {
  border-top-color: #4d4d4d;
  
}
.popover.right .arrow {
  border-right-color: #4d4d4d;
  
}
.popover.right .arrow:after {
  border-right-color: #4d4d4d;
}
.popover.bottom .arrow {
  border-bottom-color: #4d4d4d;
  
}
.popover.bottom .arrow:after {
  border-bottom-color: #4d4d4d;
  
}
.popover.left .arrow {
  border-left-color: #4d4d4d;
  right: -11px;
}
.popover.left .arrow:after {
  border-left-color: #4d4d4d;
}
.popover-container {
	margin-top: 0;	
}
 .popover {
	 background: #4d4d4d;
	 background-clip: none;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  white-space:  pre-line;
  border-radius: 6px;
}

.interact .popover-content{
	 width:240px;}

.popover-inner {
  background: #4d4d4d;
}


.popover-content{
	color:#fff;
	font-size: .9em;
	padding-bottom: 20px;
	
}

h6.greentxt {
font-size: 20px;
font-weight: lighter;
margin-top: 17px;
}

h6.greentxt b {
font-weight: normal;
}

#colorbox p {
	color: black;
	font-size: 1em;
	font-family:CiscoSansTT;
	}
	
#colorbox .redtxt {
	width:30%; 
}

	#cboxTopLeft{background: black;}
    #cboxTopRight{background: black;}
    #cboxBottomLeft{background: black;}
    #cboxBottomRight{background: black;}
    #cboxMiddleLeft{background: black;}
    #cboxMiddleRight{background: black;}
    #cboxTopCenter{background: black;}
    #cboxBottomCenter{background: black;}