/*
base orange: #e17107
blue gradient: from #3466ae to #5390f1
*/
	  html {
		  position: relative;
		  min-height: 100%;
	  }
	  
	  body {
		  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		  font-size: 12px;
		  /* Margin bottom by footer height */
		  margin-bottom: 60px;
	  }
	  
	  footer {
		  position: absolute;
		  bottom: 0;
		  width: 100%;
		  /* Set the fixed height of the footer here */
		  height: 60px;
		  background-color: #f5f5f5;
		  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .2)
	  }
	  
	  footer p {
	  	  margin-top: 10px;
	  }

	  .center {
		  margin-right: auto;
		  margin-left: auto;
	  }
	  
	  .black {
		  color: #000000;
	  }
	  
	  label.black {
		  font-weight: 300;
	  }
	  .footer-content {
		  padding-top: 4rem;
		  padding-bottom: 4rem;
	  }
	  
	  .bg-blugradient {
		  background: #3466ae;
		  background: linear-gradient(180deg, #3466ae 0%, #5390f1 100%);
	  }
	  
	  .w100 {
	  	width: 100px;
	  }
	  
	  .w-100 {
		  width: 100%;
	  }
	  
	  .w-50 {
		  width: 50%;
	  }
	  
	  .h-100 {
		  height: 100%;
	  }
	  
	  .c-white {
		  color: white;
	  }
	  
	  .t-center {
		  text-align: center;
	  }
	  
	  .mb40 {
		  margin-bottom: 40px;
	  }
	  
	  .pb40 {
		  padding-bottom: 40px;
	  }
	  
	  .mt15 {
		  margin-top: 15px;
	  }
	  
	  .mt5 {
		  margin-top: 5px;
	  }
	  
	  .fl15 {
	  	float: left; 
		margin: 0px 15px 15px 0px;
	  }
	  .c85 {
	  	width: 85%; 
		margin: auto;
	  }
  
	  .c-orange {
		  color: #e17107;
	  }
	  
	  .p20 {
		  padding: 20px;
	  }
	  
	  .bl {
	  	border-left: 1px solid #E0E0E0;
	  }
	  
	  .v-mid {
	  	vertical-align: middle;
	  }
	  
	  .dn {
		  display: none;
	  }
	  
	  .btn-orange {
		  background-color: #e17107;
/*		  border-color: #eea236;*/
		  color: #ffffff;
	  }
	  
	  .btn-orange:hover,.btn-orange:focus,.btn-orange.focus,.btn-orange:active,.btn-orange.active{
		  background-color:#ec971f;
		  border-color:#d58512;
		  color: #ffffff;
	  }
	  
	  div#msg-preview, div.msg-form {
	      background-color: white;
	      border-radius: 10px;
	      border: 1px solid #E0E0E0;
	      padding-top: 10px;
	      box-shadow: 0px 0px 35px 0px rgba(96, 96, 96, 0.38);
	      color: black;
	      margin-bottom: 40px
	  }

	  div.email-title {
	      border-bottom: 1px solid #E0E0E0;
	      padding: 5px 20px;
	      text-align: center;
	      height: 30px
	  }

	  div.email-title p {
	      height: 20px;
	      position: relative;
	      float: left;
	      width: 100%;
	      margin-top: -18px
	  }

	  div.email-headers {
	      padding: 10px 20px;
	      text-align: left
	  }

	  div.email-body {
	      padding: 20px 20px;
	      text-align: left;
		  text-size-adjust: none; 
		  -ms-text-size-adjust: none; 
		  -webkit-text-size-adjust: none;
	  }

	  div.email-footer {
	      text-align: left;
	      padding: 10px 20px;
	      border-top: 1px solid #E0E0E0
	  }

	  span.maildot {
	      height: 14px;
	      width: 14px;
	      border-radius: 50px;
	      display: block;
	      float: left;
	      margin-right: 8px;
	      position: relative
	  }

	  span.maildot.red {
	      background-color: #d50808
	  }

	  span.maildot.yellow {
	      background-color: #f5be15
	  }

	  span.maildot.green {
	      background-color: #34b51a
	  }
	  
/* right side help */
	  .help-collapsed, .help-panel {
	      position: fixed;
	      border: 1px solid #e17107;
	      border-right: none;
	      top: 130px;
	      right: 0;
	      height: 10em;
	      width: 2.4em;
	      background-color: #fff
	  }

	  .help-collapsed {
	      cursor: pointer;
	      border-bottom-left-radius: 8px;
	      border-top-left-radius: 8px;
	      background-color: #e17107;
	      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .4)
	  }

	  .help-buttonText {
	      font-family: Verdana, Arial, sans-serif;
	      color: #fff;
	      transform: rotate(+90deg);
	      width: 10em;
	      height: 2em;
	      left: -4.0em;
	      position: absolute;
	      top: 4.7em;
	      text-align: center;
	      white-space: nowrap;
	      letter-spacing: .5px
	  }

	  .help-closeIcon {
	      float: right;
	      margin-top: -5px;
		  display: inline-block;
		  cursor: pointer;
	  }

	  .help-panel {
	      width: 25em;
		  top: 10px;
		  padding-top: 65px;
	      bottom: 0;
	      right: 0;
	      margin-top: 0;
	      height: auto;
	      border: none;
	      border-left: 1px solid #d5d8d8;
	      background: #eaeded;
	      overflow-y: scroll;
	      transition: right .25s ease;
	      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .4)
	  }

	  .help-panel.help-hidden {
	      right: -25em
	  }

	  .helppanel-header {
	      margin: 16px
	  }

	  .helppanel-headerText {
	      color: #879596
	  }

	  .helppanel-body {
	      padding: 24px;
	      padding-top: 8px
	  }

	  .helppanel-body h1 {
	      font-size: 28px;
	      margin: 0;
	      line-height: 32px
	  }
	  
	  .navbar {
		  font-size: 24px;
		  padding: 6px 24px 6px 16px;
		  background: #fff;
		  z-index: 1000;
		  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2)
	  }
	  
	  .navbar .container .navbar-content {
		  color: #e17107;
		  vertical-align: top;
		  margin-left: 8px;
		  display: inline-block;
		  letter-spacing: -.6px;
		  width: 100%;
	  }
	  
	  .navbar-content .subtext {
	  	  font-size: 11px;
		  color: #6c7778;
	  }
	  
	  .top-intro {
		  padding: 6px 24px 6px 16px;
		  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
	  }
	  
	  #ipografiTopLogo {
	  	 width: 60px; 
		 float: left; 
		 margin: 0px 15px 0 0px;
	  }
	  
	  #top-text {
		  padding-top: 72px;
	  	  padding-bottom: 20px;
		  height: auto;
	  }
	  
	  #main-container {
	  	padding: 52px 0 10px 0;
	  }
	  
	  #navBtn {
		  margin-top: 15px;
	  }
	  
	  #demoMsgForm {
	  	display: block; 
		opacity: 1; 
		width: auto; 
		min-width:300px; 
		max-width: 400px;  
		padding: 10px; 
		margin: 25px;
	  }
	  
	  #failMsgForm {
	  	display: block; 
		opacity: 1; 
		width: 300px; 
		margin-top:25px;
	  }
	  
	  #failMsgForm > p {
	  	font-family: sans-serif; 
		font-size: 10px; 
		line-height: 12px; 
		color: rgb(33, 33, 33); 
		margin-bottom: 10px; 
		padding-left: 10px;
	  }
	  
	  #failMsgForm > p > span {
	  	font-family: Verdana; 
		font-size: 11px;
	  }
	  
	  .row.more-form {
		  display: none;
	  }
	  
	  #more-form {
		  padding: 10px;
		  cursor: pointer;
	  }
	  
	  #filedetails span {
		  line-height: 20px;
	  }
	  
	  #drop > img {
		  /* the loading image on upload-logo button */
		  display: none;
	  }
	  
	  div#container #main {
		  margin-bottom: 40px;
	  }
	  
	  .expltext {
	  	 color: #212121; 
		 font-size: 9px; 
		 line-height: 12px; 
	  }
	  

	  .logo-avatar {
		  /******************************** not currently used *************************************/
		  display: block;
		  border: 4px solid #fff;
		  border-radius: 50%;
		  overflow: hidden;
		  width: 70px;
		  height: 70px;
		  box-shadow: rgba(0, 0, 0, .2) 0 2px 3px
	  }
	  
	  /* feature for sig creation */
	  .img-circle {
	      border-radius: 50%;
	  }

	  /* overriding bootstrap */
  	  label {
  	  	color: #b1b3b3;
  		line-height: 11px;
  		margin-left: 7px;
  	  }
  
  	  .form-group {
  	  	margin-bottom: 10px;
  	  }
  
  	  .form-control {
    	height: 26px;
    	font-size: 12px;
  		padding: 3px 10px;
  	  }
	  
	 
	  
	  /* hiding content for small devices */
	  .sm-content {
		  display: none;
	  }
		  
	  @media screen and (max-width: 767px) {
		  .navbar-content .subtext {
		  	  display: none;
		  }
		  
		  .help-panel {
		  	padding-top: 50px;
		  }
		  
		  #top-text {
			  padding-top: 50px;
		  }
		  
		  #ipografiTopLogo {
		  	 width: 40px;
		  }
		  
		  #navBtn, .lg-content {
			  display: none;
		  }
		  /* showing content designed only for small devices while hiding the relevant for large devices */
		  .sm-content {
			  display: block;
		  }
		  
		  #defLogo + span {
	 		 font-size: 9px; 
	 		 line-height: 12px; 
		  }
		  
		  #demoMsgForm {
			  margin: 10px;
		  }
		  
		  #failMsgForm {
			  margin-bottom: 10px;
		  }
	  }