body {
  background:#c2c0c0 url('../images/main-background.png') left top repeat-x;
  color:#4C4C4C;
  font-family:Helvetica,sans-serif;
  font-size:80%;
}

h1 {
	margin:0 0 0.5em;
}

h2, h3, h4, h5 {
  margin:1.5em 0 .5em;
  line-height:1.1;
}

a, a:hover {
  color:#039393;
}

sup {
  font-weight:normal;
  font-size:60%;
}

div + hr {
  margin: 0 0 10px 0;
}

.video-left h3 {
  margin: 1.5em 0 .5em;
}

ul, ol {
  margin: 0 1.5em 1em 1.5em;
}

li.smaller-text {
  font-size: 95%;
}

thead th {
  background: #fff;
  border-bottom: 1px solid #000;
}

.center {
  text-align: center;
}

.text-callout + .image-zoom {
  margin-top: 15px;
}

.text-callout + .video-wrap {
  margin-top: 30px !important;
}

.video-wrap + .text-callout {
  margin-top: 30px !important;
}

.safety-callout + .video-wrap {
  margin-top: 30px !important;
}

.hidden {
  display:none;
}

/* -----------------------------------------------
          OUTER CONTAINER
---------------------------------------------- */

#content-container-outer {
  width:900px;
  margin:0 auto 20px;
  -moz-border-radius:10px;
  border-radius:10px;
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  background-color:#fff;
}

#content-container-inner {
  position:relative;
  width:650px;
  margin:12px 0 12px 12px;
  float:left;
  -moz-border-radius: 10px;
  border-radius:10px;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.60);
  -moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.60);
  -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.60);
  color:#464545;
}

.white-arrow {
  width:6px;
  height:11px;
  line-height:15px;
  display:inline-block;
  position:relative;
  margin-left:5px;
  top:2px;
  background:transparent url('../images/rituxan-sprite.png') -58px -68px no-repeat;
}

#content-container-outer h4 {
  font-size:1.1em;
  color:#039393;
  font-weight:bold;
  margin:0 0 10px 0;
}

#content-container-outer p {
  font-family:Helvetica,sans-serif;
  color:#4c4c4c;
}


/* ----------------------------------------------------
                          SAFETY 
this is for two different components so including it in global 
-------------------------------------------------------------*/

#safety {
  float:right;
  line-height: 1.4;
  margin-top:-35px;
  padding:0 20px 0 0;
  width:193px;
}

#safety h4 {
  font-size:1.5em;
  text-transform:uppercase;
}

.clear {
  display:block;
  clear:both;
  float:none;
  line-height:0px;
}

#safety #acknowledge, #safety #confirm {
  display:none;
}


/* ----------------------------------------------
                PAGE CONTENT
------------------------------------------------*/

/* h1 green bar */
.content-title {
  -webkit-border-radius:10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius:10px 10px 0 0;
  background: url('../images/content-bg.png') repeat-x;
  color: #fff;
  font-size: 30px;
  margin: 0 0 -10px 0;
  padding: 12px 0 20px 0;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

#content hr {
  margin:1.5em 0;
}

#content .page .control {
  background:#f1eff2 url('../images/control-background.png') left top no-repeat;
  color:#039393;
  display:block;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size:2em;
  font-weight:300;
  line-height:1.2;
  position:relative;
  margin:0 0 2px 0;
  overflow:hidden;
  padding: 20px 55px 20px 15px;
  position:relative;
  text-decoration:none;
}


#content .page .control:hover {
 color:#00a7a6; 
}

/* gray title bar orange arrow button */
.loading-spinner {
  display:none;
  width:1px;
  height:1px;
  position:absolute;
}

#content ul, #safety ul {
  margin-left:0;
  position:relative;
} 

#content ul li, #safety ul li {
  background:url('../images/bullet.gif') no-repeat 0 7px;
  list-style-type:none;
  padding-left:12px;
  z-index:100;
}

#utilities .loading-spinner {
  left: 542px;
  top: 30px;
}

#utilities.loading .loading-spinner {
  display: block;
}

#content .page a.loading .loading-spinner {
  display: block;
  right:33px;
  top:50%;
}

#content .page .control .arrow {
  background:transparent url('../images/rituxan-sprite.png') 0 0 no-repeat;
  display:block;
  width:36px;
  height:28px;
  margin-top:-14px;
  position:absolute;
  right:15px;
  top:50%;
  text-decoration:none;
}

#content .active .control .arrow  {
  background-position: -38px 0;
}

#content .page a.loading .arrow {
  display: none;
}

#content .page .control .description {
  color: #6b6b6b;
  clear:left;
  float:left;
  font-style: italic;
  font-size: 12px;
  font-weight: bold;
}

#content .page .control .arrow-right {
  background:transparent url('../images/arrow-right.png') 0 0 no-repeat;
  display:block;
  width:22px;
  height:36px;
  margin-top:-14px;
  position:absolute;
  right:22px;
  top:50%;
  text-decoration:none;
}


/*-----------------------------------------------
          CALLOUTS
-------------------------------------------------*/

#ribbon {
  position:absolute;
  left:-25px;
  width:687px;
  z-index:2;
}

#ribbon h3 {
  color:#fff;
  font-family:ff-meta-web-pro, Helvetica, sans-serif;
  font-weight:bold;
  text-align:center;
  line-height:32px;
  text-shadow: -1px 1px 1px rgba(0,0,0,.4);
  background: #5fc4bf; /* Old browsers */
  background: -moz-linear-gradient(top, #5fc4bf 0%, #02a399 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5fc4bf), color-stop(100%,#02a399)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5fc4bf 0%,#02a399 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5fc4bf 0%,#02a399 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #5fc4bf 0%,#02a399 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5FC4BF', endColorstr='#02A399',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #5fc4bf 0%,#02a399 100%); /* W3C */
  margin-top:0;
}

#ribbon-left {
  position:absolute;
  width:12px;
  height:14px;
  left:0;
  top:32px;
  background:transparent url('../images/rituxan-sprite.png') -44px -68px no-repeat;
}

#ribbon-right {
  position:absolute;
  width:12px;
  height:14px;
  right:0;
  top:32px;
  background:transparent url('../images/rituxan-sprite.png') -29px -68px no-repeat;
}

#callouts {
  display:inline-block;
  background:url('../images/callout-gradient-bottom.gif') no-repeat center bottom;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin:55px 0 0 3px;
  padding-bottom:15px;
  position:relative;
}

#callouts .callout-1, #callouts .callout-2, #callouts .callout-3 {
  float:left;
  padding:0 1% 3% 2.5%;
  background:transparent url('../images/callout-gradient.png') 2px center no-repeat;
  display:inline-block;
  position:relative;
  min-height: 125px;
  width:29.8%
}

#callouts .callout-1 img, #callouts .callout-2 img, #callouts .callout-3 img {
  float: left;
  max-width:49px;
  padding:0 5% 0 0;
  width:30%;
}

#callouts .callout-1 {
  background:none;
}

#callouts .callout-3 {
  float:right;
}

#callouts h4 {
  font-family:ff-meta-web-pro, Helvetica, sans-serif;
  font-size:1.6em;
  margin:0 0 15px;
}

#callouts p {
  color:#646464;
  line-height:1.2;
  margin:0;
  position:relative;
  float:left;
  top:-5px;
  width:65%;
}

#callouts div.link {
  color: #F87F18;
  position: absolute;
  bottom: 5px;
  right: 15px;
}

#callouts a {
  text-decoration:none;
}

#callouts a:hover {
  color:#646464;
}

#callouts a span {
  line-height:12px;
  display:inline-block;
  margin-left:5px;
  width:11px;
  height:10px;
  background:transparent url('../images/rituxan-sprite.png') 0 -69px no-repeat;
}

#callouts a:hover span {
  background-position: -12px -69px;
}

#button {
  width:133px;
  height:21px;
  overflow:hidden;
  text-align:center;
  line-height:22px;
  font-size:13px;
  color:#fff!important;
  text-decoration:none;
  display:block;
  position:relative!important;
  float:right;
  top:12px;
  left:-52px;
  background:transparent url('../images/button.png') no-repeat;
  text-shadow: -1px 1px 1px rgba(0,0,0,.4);
}

#button:active {
  top:13px;
}

/*-----------------------------------------------
          OPEN AND CLOSE FUNCTIONALITY
-------------------------------------------------*/

#content .page .content {
  display:none;
}

#content .active .content {
  display:block;
  padding:15px 40px 25px 40px;
}

/*-----------------------------------------------
          GENERAL PAGE STYLES
-------------------------------------------------*/

#content .page h3 {
  color:#77787c;
  font-size:1.55em;
  font-weight:bold;
}

#content .content h3:first-child {
  margin-top:0;
}

#content p + ul, #safety p + ul {
  margin-top:-1em;
}

/* download box for patient materials */
#content .download {
  width: 63%;
  padding: 3% 2% 3% 35%;
  margin:0 auto;
  margin-top: 30px;
  -moz-border-radius: 10px;
  border-radius:10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.60);
  background-color:#fff;
  min-height:68px;
  position:relative;
}

#content .download p {
  margin: 0px;
  line-height: 1.3;
}

#content .download .download-image {
  bottom:0;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.60);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.60);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.60);
  left:15px;
  position:absolute;
}

/* FOOTNOTES -- just use p when there is no symbol (like an asterisk or dagger)
  add clearfix class when using dl */
.footnote {
  clear: both;
}
#content dl.footnote, #content p.footnote {
  font-size:.8em;
}

#content dl.footnote dt {
  float:left;
  width:6px;
}

#content dl.footnote dd {
  margin-left:6px;
}

/* for a footnote following an image, generally wants to sit closer to the bottom */
/*#content .image-zoom + .footnote {
  margin-top:-1em;
}
*/

.image-zoom {
  position:relative;
  margin-bottom: 15px;
  display:inline-block;
  text-decoration: none;
  width: 100%;
}

.image-zoom img {
  float: left;
}

.full-size {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  background: #ececec url('../images/full-size.png') no-repeat center center ;
  bottom: 0;
  border-radius: 28px;
  display: block;
  float: left;
  height: 56px;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  width: 56px;
}

.full-size:hover {
  background-color:#efefef;
}

#content .image-zoom .link {
  position: absolute;
  left: 400px;
  top: 100%;
}

#content .image-zoom .controls {
  width:50px;
  height:120px;
  background:transparent url('../images/image-zoom-controls-background.png') left top no-repeat;
  position:absolute;
  right:-60px;
  bottom:0;
}

#content .image-zoom .zoom {
  width:32px;
  height:32px;
  display:block;
  position:relative;
  top:19px;
  left:9px;
  background:transparent url('../images/rituxan-sprite.png') 0 -29px no-repeat;
}

#content .image-zoom .download {
  width:29px;
  height:26px;
  display:block;
  position:relative;
  top:40px;
  left:9px;
  background:transparent url('../images/rituxan-sprite.png') -36px -31px no-repeat;
}

#content .text-callout {
  display: inline-block;
  background:transparent url('../images/text-callout-bottom.jpg') left bottom no-repeat;
  font-size:14px;
  margin: 15px 0;
  width:488px;
}

#content .text-callout p {
  margin: 0 0 1em 0;
  padding:0 13px 0 13px;
  text-align: center;
}

#content .text-callout .top {
  background:transparent url('../images/text-callout-top.jpg') left top no-repeat;
  height:4px;
  overflow:hidden;
  margin-bottom:10px;
}

h3 + .image-zoom {
  margin:1.5em 0;
}

.safety-callout + .image-zoom {
  margin: 15px 0 0 0;
}

#content .three-columns {
  margin: 0 0 0 17px;
  overflow:hidden;
}

#content .three-columns div {
  float:left;
  margin-right: 54px;
  width: 125px;
}

#content .three-columns div:last-child {
  margin-right:0;
}

#content .video-wrap {
  background: url('../images/video-bottom.png') left bottom no-repeat;
  display: inline-block;
  float: left;
  margin:.5em 0 1.5em 0;
  width: 594px;
}

#content .video-wrap .top {
  background: url('../images/video-top.png') left top no-repeat;
  height: 4px;
  overflow:hidden;
  margin-top: -4px;
}

#content .video-wrap h3 {
  color: #039393;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1.6em;
  font-weight: normal;
  margin:.5em 15px;
}

#content .video-wrap p {
  margin-left:15px;
  margin-right:15px;
}

#content .description {
  color: #6b6b6b;
  font-style: italic;
  font-size: 14px;
  font-weight: bold;
}

#content .description strong{
  font-style: normal;
  font-size: 103%;
}

#content .video-wrap .video-js-box {
  margin: 15px;
}

/* also add clearfix to reference lists */
dl.references dt {
  float:left;
  width:10px;
  font-size: .8em;
}

dl.references dd {
  font-size: .8em;
}

.safety-callout {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  background: #f1eff2;
  border-radius: 7px;
  padding: 20px 20px 10px 20px;
}

.safety-callout h3 {
  margin: 0 0 .5em 0;
}

.safety-callout + .safety-expand {
  margin-top:-7px;
}

#content .interior {
  background: #fff;
  -moz-border-radius:0 0 10px 10px;
  border-radius:0 0 10px 10px;
  padding: 20px;
}

.safety-callout dd {
  background: url('../images/disc.png') no-repeat left 7px;
  margin-left: 0;
  padding-left: 1.5em;
}

.iframe-widget {
  position: relative;
  left: 28%;
}

#content table {
  border: 1px solid black;
}

/*-----------------------------------------------
            SITEMAP
-------------------------------------------------*/

#sitemap ul {
  list-style-type: none;
}

#sitemap > ul {
  float: left;
  width: 266px;
}

#sitemap ul li {
  margin: 2px 0 5px;
}

#sitemap ul li a {
  font-weight: bold;
  text-decoration: none;
}

#sitemap ul li a:hover {
  text-decoration: underline;
}

#sitemap ul li ul li a {
  font-weight: normal;
}


/*-----------------------------------------------
            SEARCH
-------------------------------------------------*/

#results-total h3 {
  margin:0 0 25px;
}

#results-wrap ul {
  list-style-type:none;
  margin-left:0;
}

#results-wrap ul li {
  margin-bottom:25px;
}

#results-wrap ul h4 {
  margin-bottom:5px;
}

#results-wrap ul .result-path a {
  text-decoration:none;
}

#results-wrap ul .result-path a:hover {
  text-decoration:underline;
}

#page-num-wrap {
  margin-top:30px;
  text-align:center;
}

/*-----------------------------------------------
            NURSE PAGE
-------------------------------------------------*/

.nurses #content-container-inner {
  margin: 155px 0 12px 12px;
}

.nurses #content #nurses-header {
  background: url('../images/nurses-header.png') no-repeat;
  height: 117px;
  margin: -155px 0 0 13px;
  padding: 38px 20px 0 20px;
}

.nurses #content #nurses-header h1 {
  color: #fff;
  font-size: 30px;
  margin: 0 0 5px 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

.nurses #content #nurses-header p {
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

.nurses #content .page .control h2 {
  margin: 10px 0 0 10px;
}

.nurses #content .page .control p {
  margin: 5px 20px 0 10px;
}

#sign-up-callout {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: #faa355 1px solid;
  border-radius: 5px;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #f1eff2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1eff2));
  background: -webkit-linear-gradient(top, #ffffff 0%,#f1eff2 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#f1eff2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1eff2',GradientType=0 );
  background: linear-gradient(top, #ffffff 0%,#f1eff2 100%);
  display:block;
  margin: 30px auto;
  padding: 22px 29px;
  width:70%;
}

#sign-up-callout h3 a {
  color: #039393;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 24px;
  font-weight: normal;
}

#sign-up-callout p, #sign-up-callout p a {
  color: #6b6b6b;
  font-style: italic;
  font-size: 12px;
  font-weight: bold;
}

#sign-up-callout img {
  float: left;
  margin: 10px 15px 0 0;
}

#sign-up-callout h3 {
  display: inline-block;
  margin: 0 0 10px 0;
}

#sign-up-callout h3 a {
  text-decoration: none;
}

#sign-up-callout p {
  margin: 0;
}