/***************************************************
  ims dialog
 ***************************************************/


.ims_dialog {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
} 

.ims_dialog .ims_dialog_background {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 3000;
  background-color: #333;
  bottom: 0;
  opacity: 0.4; 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  
} 

.ims_dialog .ims_dialog_box {
  top: 7%;
  min-width: 300px;
  z-index: 3000;
  margin: 0 0 0 0;
  background-color: #E7E7E7;
  position: absolute;
  display: block;
  font-size: 12px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='black')";
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.1s ease-in-out all;
  -moz-transition: 0.1s ease-in-out all;
  -ms-transition: 0.1s ease-in-out all;
  -o-transition: 0.1s ease-in-out all;
  transition: 0.1s ease-in-out all;      
  left: 50%;
  margin-left: -350px;
}      

.ims_dialog #ims_dialog_form {
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
}  

.ims_dialog #ims_dialog_frame {
  width: 700px;
  height: 540px;
  overflow: hidden; 
  padding: 20px;
  -webkit-transition: 0.2s ease-in-out all;
  -moz-transition: 0.2s ease-in-out all;
  -ms-transition: 0.2s ease-in-out all;
  -o-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;    
}      

/*.ims_dialog .ims_dialog_box a.close {
  position: absolute;
  display: inline-block;
  left: 100%;
  margin-left: -40px;
  margin-top: 10px; 
  height: 30px;
  width: 30px;  
  -webkit-transition: 0.1s ease-in-out opacity;
  -moz-transition: 0.1s ease-in-out opacity;
  -ms-transition: 0.1s ease-in-out opacity;
  -o-transition: 0.1s ease-in-out opacity;
  transition: 0.1s ease-in-out opacity;
}  */

.ims_dialog button.btn-close {
  position: absolute;
  right: 5px;
  top: 10px;
  background: transparent;
  border: 0;
  width: auto;
}

.ims_dialog button.btn-close em {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999em;
  margin: 0 auto;
  background-position: 30px -1288px;
}

.ims_dialog button.btn-close:active { box-shadow: none; }

.ims_dialog button.btn-close:active {
  background: none;
  border: 0;
  outline: 0;
}

.ims_dialog button.btn-close:hover { cursor: pointer; }

 
@media only screen and (max-width: 700px) {  

  .ims_dialog #ims_dialog_frame {
    width: 90%;    
    height: 700px;        
  }  
  
  .ims_dialog .ims_dialog_box {    
    left: 0%;
    margin: 0 5% 0 5%;
    width: 90%;
  }   

}

  @media only screen and (-webkit-min-device-pixel-ratio: 2){
    .ims_dialog .ims_dialog_box a.close span.close_x {    
      background-image: url('/resource/img/sprite_30x30_2x.png');
      background-size: 60px;
  }  
}


/********** Wait View **********/

.wait-blanket {
    opacity: 0.7;      
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    position: fixed;
    display: block;
    top: 35px;
    width: 100%;
    height: 100%;
    left: 0px;`
    z-index: 1001;
    background-color: #808080;
    padding-bottom: 60px;  
    text-align: center;
}

#wait-spinner{
    width: 100%;
    position: absolute;
    top: 30%;
}
   
#wait-spinner .alt-spinner {  
  position: relative;  
  left: 50%;    
  display: none;
  width: 45px;
  height: 35px;   
  margin-left: -23px;    
  background: transparent url('/resource/img/ie-loader.gif') no-repeat 50% 50%;    
}
             
#wait-spinner .logo-spinner {   
    position: relative;  
    left: 50%;   
    margin-left: -23px; 
    display: block;
    width: 45px;
    height: 35px;
    background: transparent url('/resource/img/icon-cc-med-white.png') no-repeat 50% 50%;   
    
    -webkit-animation-name: spinnerAlt;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;      
    
    -moz-animation-name: spinnerAlt;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-timing-function: ease-in-out;    
}     

#wait-spinner .spinner-text {
  font-size: 40px;
  font-size: 2.5rem; 
  color: white;  
  
}  

@-webkit-keyframes spinnerAlt {
    from { -webkit-transform: rotateY(0deg); }                  
    to { -webkit-transform: rotateY(360deg); }
}   

@-moz-keyframes spinnerAlt {
    from { -moz-transform: rotateY(0deg); }                  
    to { -moz-transform: rotateY(360deg); }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2){
  #wait-spinner .logo-spinner {
    background-image: url('/resource/img/icon-cc-med-white-2x.png');
    background-size: 45px;
  }
  #wait-spinner .alt-spinner {     
    background-image: url('/resource/img/ie-loader-2x.gif');  
    background-size: 128px;  
  }

}


/***************************************************
  header new
 ***************************************************/

.header-new {
  border-bottom: 1px solid #111;  
/*  box-shadow: 0 1px 0 #555;       
  -webkit-box-shadow: 0 1px 0 #555;
  -moz-box-shadow: 0 1px 0 #555;  */
  background-color: #191919;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#282828), to(#191919));
  background-image: -webkit-linear-gradient(#282828, #191919);
  background-image: -moz-linear-gradient(top, #282828, #191919);
  background-image: -ms-linear-gradient(#282828, #191919);
  background-image: -o-linear-gradient(#282828, #191919);
  background-image: linear-gradient(#282828, #191919);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#191919', GradientType=0);
  line-height: 12px;
  z-index: 9999;
}

.header-unrendered {
  height: 46px;
  overflow: hidden;
  visibility: hidden;
}

.header-new hr {
  clear: both;
  height: 0px;
  margin: 0px;
  padding: 0px;
  border: none;
}

.header-new .logo {
  background-position: -30px -1080px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 9px 11px 0 11px;
  position: relative;
  float: left;
  cursor: pointer;
}

.header-new .nav {
  position:relative;
  line-height: 12px;
}

.header-new .nav ul {
  margin:0; 
  padding:0; 
  list-style:none; 
  white-space:nowrap; 
  text-align:left;
  padding:0;
}

.header-new .nav li {
  display:inline;
}

.header-new .nav ul ul {
  position:absolute; 
  right:100%;
  display:none;
  background: #444; 
  z-index: 2000;     
}

.header-new .nav > ul {
  position:relative; 
  float:left;
  -webkit-font-smoothing: subpixel-antialiased;
}
.header-new .nav > ul > li {
  float:left;
  position: relative;      
}
.header-new .nav > ul > li > ul {
  position: absolute;
  right: 0;
}

.header-new .nav a {
  display:block; 
  color: #bbb;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
  text-decoration:none; 
  padding: 12px 16px 11px;
  font-size: 1.125rem;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: .1em;  
  -webkit-transition: 0.2s ease-in-out all;
  -moz-transition: 0.2s ease-in-out all;
  -ms-transition: 0.2s ease-in-out all;
  -o-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;
}    

/* only show buttons when typekit is fully loaded... */
.wf-active .header-new .nav a {
  visibility: visible;
}

.header-new .nav a.special {
  color: #44a1df;
}
  
.header-new .nav ul ul li a {
  padding: 10px 20px;
}

.header-new .nav ul ul li:first-child a {
  padding-top: 15px;
}

.header-new .nav ul ul li:last-child a {
  padding-bottom: 20px;
}

.header-new .nav li:hover > a,
.header-new .nav li.active > a {
  color: #efefef;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .95);
}

.header-new .nav li:hover > a.special,
.header-new .nav li.active > a.special {
  color: #64c1ff;
}

.header-new .nav li.sub:hover > a {
  background-color:#444;
}

.header-new .nav ul li:hover > ul {
  display:block;  
}

.header-new .nav img {
  position:fixed; 
  width:100%; 
  height:1px;
  left:0; 
  top:0; 
  z-index:-1;
}

.header-new .nav ul:hover + img {
  height:100%;
}

.header-new .profile {
  display: inline-block;
  position: relative;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.header-new .profile > a {
  float: right;
  margin: 10px 10px 0 0;
  padding: 6px 14px;
}

@media only screen and (max-width: 480px) {
  .header-new .profile > a {
    padding: 6px 10px;
  }
}

.header-new .alert {
  position: absolute;
  top: 11px;
  left: -40px;
  text-align: center;
}
.header-new .alert a {
  display: block;
  background-color: #247fcc;
  background-repeat: repeat-x;
  height: 18px;
  padding: 6px 9px 0px 9px;
  color: #fff;
  text-indent: -1px;
  border-radius: 2px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#50a3e2), to(#247fcc));
  background-image: -webkit-linear-gradient(top, #50a3e2, #247fcc);
  background-image: -moz-linear-gradient(top, #50a3e2, #247fcc);
  background-image: -o-linear-gradient(top,#50a3e2, #247fcc);
  background-image: -ms-linear-gradient(top, #50a3e2, #247fcc);
  background-image: linear-gradient(top, #50a3e2, #247fcc);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#50a3e2', EndColorStr='#247fcc');
}
.header-new .alert a:hover {
  background-color: #2970aa;
  background-repeat: repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2b85cf), to(#2970aa));
  background-image: -webkit-linear-gradient(top, #2b85cf, #2970aa);
  background-image: -moz-linear-gradient(top, #2b85cf, #2970aa);
  background-image: -o-linear-gradient(top,#2b85cf, #2970aa);
  background-image: -ms-linear-gradient(top, #2b85cf, #2970aa);
  background-image: linear-gradient(top, #2b85cf, #2970aa);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#2b85cf', EndColorStr='#2970aa'); 
}


.header-new .signin_input {
  margin: 0 0 10px 0;
  max-width: 250px;
}


/***************************************************
  profile panel
 ***************************************************/

.header-new .profile .profile_menu {
  position: absolute;
  width: 308px;
  right: 5px;
  top: 45px;
  background: white;
  border: 1px #ddd solid;
}

.header-new .profile .arrow {
  background-repeat: no-repeat;
  background-position: 0 -1080px;
  position: inline-block;
  width: 14px;
  height: 10px;
  float: right;
  margin: 19px 0 0 0;
}

.header-new .profile .avatar {
  background-position: -14px -1124px;
  background-repeat: no-repeat;
  position: inline-block;
  width: 32px;
  height: 32px;
  float: right;
  margin: 7px 7px 0 0;
}

.header-new .profile_panel {
  position: absolute;
  display: block;
  top: 50px;
  right: 10px;
  width: 300px;
  z-index: 20000;
  
  background: white;
  border: 1px #aaa solid;
}

.page_plans_html .header-new .signup_button,
.page_landing_plans_html .header-new .signup_button,
.page_join_html .header-new .signup_button,
.page_join_html .header-new .login_button {
  display: none;
}

.header-new .profile_panel .arrow,
.header-new .profile_panel .arrow_border {
  position: absolute;
  top: -9px;
  right: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #FFF;
}

.header-new .profile_panel h3 {
  font-size: 1.4em;
  line-height: 1.2em;
  margin-bottom: 16px;
}

.header-new .profile_panel .arrow_border {
  top: -10px;
  border-color: transparent transparent #aaa;
}

.header-new .profile_panel .inner {
  padding: 20px 20px 10px 20px;
}

.header-new .profile_panel .name {
  font-size: 1.3rem;
  line-height: 1.2rem;
  color: black;
  margin-bottom: 6px;
}

.header-new .profile_panel .email {
  word-wrap: break-word;
  line-height: 1.2;
}

.header-new .profile_panel .links {
  margin: 10px 0;
}

.header-new .profile_panel .links a {
  text-decoration: none;
}

.header-new .profile_panel .links a:hover {
  text-decoration: underline;
}

.header-new .profile_panel .actions {
  padding: 12px 20px;
  border-top: 1px solid #c4c4c4;
  background-color: #f0f0f0;
}

.header-new .profile_panel .actions a {
  display: block;
}



/***************************************************
  profile panel files quota
 ***************************************************/

.files_quota {
  position: relative;
  padding: 10px 0;
  margin: 0;
  display: block;
  border-top: 1px #c4c4c4 solid;
}
.page_files_html_wide .files_quota {
  display: block;
}

.files_quota h2 {
  font-size: .8rem;
  margin-bottom: .05em;
  font-weight: 200;
  margin-bottom: 1px;
  color: #888;
}
.files_quota h2 strong {
  font-weight: 400;
}

.usage_indicator {
  display: block;
  width: 100%;
}

.usage_indicator .usage_track {
  display: block;
  height: 1.1em;
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #aaa;
  background: #c2c2c2 url('/resource/img/bg-render-quota-percent.png') repeat 0 0;
}

.usage_indicator .usage_percent {
  display: block;
  width: 1%;
  min-width: 1px;
  height: 100%;
  background-color: #227ecb;
  -webkit-transition-property: width;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: width;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease-out;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}


.over_quota .usage_indicator .usage_percent {
  background-color: #f42828;
}

.warning-quota .usage_indicator .usage_percent {
  background-color: #e8dc17;
}

.usage_indicator .usage_total {
  display: inline-block;
  font-size: 13px;
  font-size: .8125rem;
  color: #999;
  left: 9px;
  position: relative;
  top: -4px;
  line-height: 9px; 
  font-weight: 400;
}

.files_quota .usage_label {
  margin-top: 5px;
}

.files_quota .usage_footer {
  margin-top: 5px;
}

.files_quota .usage_footer a {
  text-decoration: none;
}

.files_quota .usage_footer .usage_label {
  float: right;
  margin-top: 0;
}

.files_quota .quota_message {
  margin-bottom: 5px;
  line-height: 1rem;
}

.files_quota .quota_message b {
  font-weight: bold;
}
.files_quota .quota_message a {
  text-decoration: none;
}
.files_quota .quota_message a:hover {
  text-decoration: underline;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2){
  .usage_indicator .usage_track {
    background-image: url('/resource/img/bg-render-quota-percent-2x.png');
    background-size: 5;
  }
}




/* Retina ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  .header-new .nav a {
    letter-spacing: 0;
  }
}