﻿/*	--------------------------------------------------
	:: Media Cloud
-------------------------------------------------- */

/* basic styling for both views */
.media_cloud ul, .media_cloud li, .media_cloud h1, .media_cloud h2, .media_cloud h3, .media_cloud h4 {
  margin: 0;
  padding: 0;
}

.media_cloud .clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

.media_cloud .left { float: left; }
.media_cloud .right { float: right; }


/* STEP 1 */
#media_cloud {
  width: 730px;
}

#media_cloud .title {
  text-transform: none;
}

#media_cloud .vertical_line {
  position: absolute;
  z-index: 10;
  background: url(/MediaLibrary/images/vertical_line.png) repeat-y right;
  height: 83.4%;
  width: 3px; /*Hack - making line thinner*/
  margin-left: 32%;
}

#media_cloud *, #media_cloud *:before, #media_cloud *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#media_cloud .content {
  border: 1px solid #DDDDDD;
  margin: 20px;
  min-height: 364px;
  position: relative;
}

#media_cloud .provider-button a {
  color: #333333;
  text-decoration: none;
}

#media_cloud .provider-button a, #media_cloud .provider-button a img { border: none; }

#media_cloud .pc-upload {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 220px;
}

#media_cloud .pc-upload:before,
#media_cloud .pc-upload:after {
  content: '';
  height: 100%;
}

#media_cloud .pc-upload:before {
  display: inline-block;
  vertical-align: middle;
}

#media_cloud .provider-button {
  display: inline-block;
  text-align: center;
}

#media_cloud .provider-button:hover,
#media_cloud .provider-button:hover a {
  font-weight: bold;
  color: #0060a9;
}

#media_cloud .provider-button img {
  margin-bottom: 5px;
}

#media_cloud .pc-upload .provider-button {
  cursor: pointer;
  width: 150px;
  vertical-align: middle;
}

#media_cloud .pc-upload:after {
  background: url(/MediaLibrary/images/vertical_line.png) repeat-y right center;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
}

#media_cloud .pc-upload-bg {
  background: url(/MediaLibrary/images/icon_upload.png) no-repeat center center;
  margin-bottom: 15px;
  height: 144px;
}

#media_cloud .social-providers {
  margin-left: 220px;
  padding-top: 20px;
  text-align: center;
}

#media_cloud .social-providers .provider-button {
  height: 125px;
  padding: 5px;
  width: 84px;
}

#media_cloud .media_note {
  padding: 0 5px;
}

/************* STEP 2 **************/

#media_cloud2 {
  height: 828px;
  max-width: none;
  width: 1160px;
}

#media_cloud2 *, #media_cloud2 *:before, #media_cloud2 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#media_cloud2 .importer h3 span.btn_cta_1b_med {
  margin-top: 5px;
  padding-top: 0;
}

#media_cloud2 .importer .content {
  padding: 5px;
  display: block;
}

#media_cloud2 .importer > h3 {
  padding-top: 10px;
  margin: 0px;
}

#media_cloud2 .importer > h3 .btn_cta_1b_med input {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

#media_cloud2 .importer .box .hdr {
  background-color: #0060a9;
  color: #fff;
}

#media_cloud2 .importer .box .hdr ul.htabs {
  width: 866px;
  padding: 5px 5px 0;
  float: left;
}

#media_cloud2 .importer .box .hdr ul.htabs > li {
  display: block;
  color: #fff;
  vertical-align: bottom;
  float: left;
}

#media_cloud2 .importer .box .hdr ul.htabs li a.select {
  background-color: #fff;
  color: #0060a9;
}

#media_cloud2 .importer .box .hdr ul.htabs > li a {
  height: 30px;
  padding: 5px 15px 5px 55px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  text-transform: capitalize;
  display: block;
  background-position: 10px center;
  background-repeat: no-repeat;
  border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
}

#media_cloud2 .importer .box .hdr ul.htabs li.facebook_os a {
  background-image: url('/MediaLibrary/images/icon_facebook_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.instagram_os a {
  background-image: url('/MediaLibrary/images/icon_instagram_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.flickr_os a {
  background-image: url('/MediaLibrary/images/icon_flickr_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.tumbl_os a {
  background-image: url('/MediaLibrary/images/icon_tumblr_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.picasa_os a {
  background-image: url('/MediaLibrary/images/icon_picasa_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.gdrive_os a {
  background-image: url('/MediaLibrary/images/icon_gdrive_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.dropbox_os a {
  background-image: url('/MediaLibrary/images/icon_dropbox_tab.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.skydrive_os a {
  background-image: url('/MediaLibrary/images/icon_skydrive_tab.png');
  background-position: 7px 0;
}

#media_cloud2 .importer .box .hdr ul.htabs li.facebook_os a.select {
  background-image: url('/MediaLibrary/images/icon_facebook_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.instagram_os a.select {
  background-image: url('/MediaLibrary/images/icon_instagram_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.flickr_os a.select {
  background-image: url('/MediaLibrary/images/icon_flickr_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.tumbl_os a.select {
  background-image: url('/MediaLibrary/images/icon_tumblr_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.picasa_os a.select {
  background-image: url('/MediaLibrary/images/icon_picasa_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.gdrive_os a.select {
  background-image: url('/MediaLibrary/images/icon_gdrive_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.dropbox_os a.select {
  background-image: url('/MediaLibrary/images/icon_dropbox_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.skydrive_os a.select {
  background-image: url('/MediaLibrary/images/icon_skydrive_tab_on.png');
}

#media_cloud2 .importer .box .hdr ul.htabs li.more {
  cursor: pointer;
  text-align: right;
  float: right;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more h5 {
  height: 40px;
  *height: 25px;
  margin: 0 10px 0 0;
  *padding-top: 15px;
  line-height: 40px;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more ul {
  height: 0;
  position: relative;
  display: none;
  z-index: 10;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more ul li {
  padding: 1px;
  background-color: #0060a9;
  display: block;
  text-align: left;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more ul li a {
  padding-left: 15px;
  display: block;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more ul li:hover a,
#media_cloud2 .importer .box .hdr ul.htabs li.more ul li a.select {
  background-color: #fff;
  color: #0060a9;
  *color: #fff;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more:hover ul {
  display: block;
}

#media_cloud2 .importer .box .hdr > .selected {
  width: 270px;
  height: 30px;
  padding: 10px 0 5px;
  display: block;
  text-align: center;
  vertical-align: bottom;
  border-left: 1px solid #dbdbdb;
  float: right;
}

#media_cloud2 .importer .box .hdr > .selected .left {
  display: none;
}

#media_cloud2 .importer .box .hdr > .selected .left h4 {
  padding: 0 20px;
  font-size: 24px;
  line-height: 24px;
}

#media_cloud2 .importer .box .hdr > .selected .right {
  width: 270px;
}

#media_cloud2 .importer .box .hdr > .selected label {
  font-weight: bold;
  font-size: 16px;
  display: inline;
}

#media_cloud2 .importer .box .hdr > .selected span {
  margin-left: 20px;
  padding: 5px 8px;
  font-weight: bold;
  font-size: 16px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  background-color: #fff;
  color: #0060a9;
}

#media_cloud2 .importer .tab {
  width: 877px;
  border-right: 1px solid #dbdbdb;
  float: left;
}

#media_cloud2 .importer .tab .scrollbox {
  background-color: #ddd;
  height: 510px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 877px;
}

#media_cloud2 .importer .tab .scrollbox.short {
  height: 350px;
}

#media_cloud2 .importer .tab .scrollbox .tab {
  width: 100%;
  border-right: none;
}

#media_cloud2 .importer .tab .scrollbox .alert-message {
  margin: 90px auto 20px;
}

#media_cloud2 .importer .tab .slide {
  width: 100%;
  height: 40px;
  margin: 20px auto;
  display: block;
}

#media_cloud2 .importer .tab .slide a {
  height: 40px;
  line-height: 40px;
  display: block;
  text-decoration: none;
  float: left;
}

#media_cloud2 .importer .tab .slide .prev a {
  width: 40px;
  height: 40px;
  background: url('/MediaLibrary/images/icon_nav_prev.png') no-repeat center center;
  background-color: #eee;
}

#media_cloud2 .importer .tab .slide .prev a:hover {
  background-color: #ffc484;
}

#media_cloud2 .importer .tab .slide .next a {
  width: 40px;
  height: 40px;
  background: url('/MediaLibrary/images/icon_nav_next.png') no-repeat center center;
  background-color: #eee;
}

#media_cloud2 .importer .tab .slide .next a:hover {
  background-color: #ffc484;
}

#media_cloud2 .importer .tab .slide .list ul {
  width: 797px;
  display: block;
  background-color: #eee;
  float: left;
}

#media_cloud2 .importer .tab .slide .list ul li {
  width: 19.8%;
  text-align: center;
  display: block;
  border-right: 1px solid #fff;
  float: left;
}

#media_cloud2 .importer .tab .slide .list ul li:first-child {
  border-left: 1px solid #fff;
}

#media_cloud2 .importer .tab .slide .list ul li a {
  width: 100%;
  white-space: nowrap;
  display: block;
  font-weight: bold;
  color: #666;
}

#media_cloud2 .importer .tab .slide .list ul li a:hover,
#media_cloud2 .importer .tab .slide .list ul li a.active {
  color: #fff;
  background-color: #ffc484;
}

#media_cloud2 .importer .box .hdr ul.htabs {
  position: relative;
}

#media_cloud2 .importer .box .hdr ul.htabs > li a {
  font-size: 14px;
  padding-left: 50px;
  padding-right: 10px;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more {
  position: absolute;
  right: 0;
  top: 5px;
  width: 75px;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more ul {
  border: 8px solid transparent;
  border-top: 1px solid transparent;
  margin-top: 40px;
  position: absolute;
  right: -9px;
  top: 0;
  width: 180px;
}

#media_cloud2 .importer .box .hdr ul.htabs li.more:hover ul {
  display: block;
}

#media_cloud2 .txt_center {
  text-align: center;
}

/* ALBUM CAROUSEL */
#media_cloud2 .carousel_albums {
  width: 100%;
  height: 182px;
  margin: 20px auto 0;
  background: url('/MediaLibrary/images/bak_album_carousel.png') repeat-x left bottom;
}

#media_cloud2 .carousel_albums ul li {
  cursor: pointer;
  width: 196px;
  height: 182px;
  background: url('/MediaLibrary/images/bak_album.png') no-repeat center top;
  display: block;
  float: left;
}

#media_cloud2 .carousel_albums ul li:hover {
  background: url('/MediaLibrary/images/bak_album_hover.png') no-repeat center top;
}

#media_cloud2 .carousel_albums ul li.active,
#media_cloud2 .carousel_albums ul li:hover.active {
  background: url('/MediaLibrary/images/bak_album_on_hover.png') no-repeat center top;
}

#media_cloud2 .carousel_albums ul li .thumb {
  width: 142px;
  height: 92px;
  margin: 20px 0 0 32px;
  display: block;
}

#media_cloud2 .carousel_albums ul li .details {
  width: 144px;
  padding: 10px 0 0 31px;
  display: block;
  color: #fff;
  text-align: left;
}

#media_cloud2 .carousel_albums ul li .details h4 {
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  text-overflow: ellipsis;
  width: 115px;
  white-space: nowrap;
  overflow: hidden;
}

#media_cloud2 .carousel_albums ul li .details small {
  line-height: 10px;
  font-size: 11px;
  color: #fff;
  position: relative;
  top: -3px;
}

#media_cloud2 .carousel_albums ul li .select {
  width: 19px;
  height: 19px;
  display: block;
  background: url('/MediaLibrary/images/icon_item_add.png') no-repeat center center;
  float: right;
}

#media_cloud2 .carousel_albums ul li .select a {
  width: 19px;
  height: 19px;
  display: block;
  text-decoration: none;
}

#media_cloud2 .carousel_albums ul li .all {
  background: url('/MediaLibrary/images/icon_item_selected_all.png') no-repeat center center;
}

#media_cloud2 .carousel_albums ul li .some {
  background: url('/MediaLibrary/images/icon_item_selected_partial.png') no-repeat center center;
}

#media_cloud2 .carousel_albums ul li:hover .some {
  background: url('/MediaLibrary/images/icon_item_remove.png') no-repeat center center;
}

#media_cloud2 .carousel_container {
  display: block;
  position: relative;
  width: 785px;
  padding: 0px 45px;
}

#media_cloud2 .carousel_clip {
  display: block;
  position: relative;
  overflow: hidden;
  width: 785px;
  float: left;
}

#media_cloud2 .carousel_albums .prev {
  width: 43px;
  height: 182px;
  display: block;
  left: 3px;
  position: absolute;
}

#media_cloud2 .carousel_albums .next {
  width: 43px;
  height: 182px;
  display: block;
  right: 1px;
  position: absolute;
}

#media_cloud2 .carousel_albums .prev a {
  width: 43px;
  height: 170px;
  display: block;
  background: url('/MediaLibrary/images/icon_carousel_prev.png') no-repeat center center;
  text-decoration: none;
}

#media_cloud2 .carousel_albums .next a {
  width: 43px;
  height: 170px;
  display: block;
  background: url('/MediaLibrary/images/icon_carousel_next.png') no-repeat center center;
  text-decoration: none;
}

#media_cloud2 .carousel_albums ul {
  height: 182px;
  overflow: hidden;
  position: relative;
  width: 25000px;
}

#media_cloud2 .fade_containers {
  text-align: center;
  width: 877px;
  opacity: 0.6;
  position: absolute;
  z-index: 9;
  height: 190px;
  background-color: white;
  color: rgb(0, 97, 170);
}

#media_cloud2 .fade_containers img {
  margin-top: 80px;
}

#media_cloud2 .fade_medias {
  text-align: center;
  width: 877px;
  opacity: 0.6;
  position: fixed;
  z-index: 9;
  height: 546px;
  background-color: white;
  color: rgb(0, 97, 170);
  margin-top: 190px;
}

#media_cloud2 .fade_medias img {
  margin-top: 250px;
}

/* SELECT/DESELECT */
#media_cloud2 .select_deselect {
  display: block;
  background-color: #ddd;
  padding-left: 17px;
  padding-top: 10px;
  text-align: left;
}

#media_cloud2 .select_deselect span {
  padding: 0 10px;
}

/* PHOTOS */
#media_cloud2 ul.photos2 {
  width: 100%;
  height: auto;
  float: left;
}

#media_cloud2 ul.photos2 li {
  width: 162px;
  height: 175px;
  margin: 0 25px;
  background: url('/MediaLibrary/images/bak_photo.png') no-repeat center 10px;
  display: block;
  float: left;
}

#media_cloud2 ul.photos2 li:hover {
  background: url('/MediaLibrary/images/bak_photo_hover.png') no-repeat center 10px;
}

#media_cloud2 ul.photos2 li.album {
  cursor: pointer;
  background: url('/MediaLibrary/images/bak_album_sm.png') no-repeat center 10px;
}

#media_cloud2 ul.photos2 li.album .details h4 {
  font-weight: bold;
  color: #fff;
}

#media_cloud2 ul.photos2 li.album:hover {
  background: url('/MediaLibrary/images/bak_album_sm_hover.png') no-repeat center 10px;
}

#media_cloud2 ul.photos2 li .thumb {
  width: 142px;
  height: 92px;
  margin: 20px auto 0;
  display: block;
}

#media_cloud2 ul.photos2 li .details {
  width: 144px;
  padding: 10px 0 0 9px;
  display: block;
}

#media_cloud2 ul.photos2 li .details h4 {
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  text-align: left;
  text-overflow: ellipsis;
  width: 115px;
  white-space: nowrap;
  overflow: hidden;
}

#media_cloud2 ul.photos2 li .details small {
  line-height: 10px;
  font-size: 11px;
  color: #999;
  position: relative;
  top: -3px;
}

#media_cloud2 ul.photos2 li .select {
  cursor: pointer;
  width: 19px;
  height: 19px;
  display: block;
  background: url('/MediaLibrary/images/icon_item_add.png') no-repeat center center;
  float: right;
}

#media_cloud2 ul.photos2 li .select.active {
  background: url('/MediaLibrary/images/icon_item_selected_all.png') no-repeat center center;
}

#media_cloud2 ul.photos2 li .quickview {
  width: 63px;
  height: 56px;
  display: none;
  text-align: center;
  position: relative;
  top: 40px;
  left: 30%;
}

#media_cloud2 ul.photos2 li:hover .quickview {
  display: block;
}

#media_cloud2 .thumb img {
  max-width: 142px;
  max-height: 95px;
}

/* IMPORT COLUMN */
#media_cloud2 .importer .active_list {
  width: 269px;
  margin-left: -1px;
  border-left: 1px solid #dbdbdb;
  text-align: center;
  display: block;
  float: right;
}

#media_cloud2 .importer .active_list fieldset {
  padding: 10px;
  background-color: #ededed;
  text-align: left;
}

#media_cloud2 .importer .active_list fieldset div {
  padding: 5px 0;
}

#media_cloud2 .importer .active_list fieldset div label {
  padding-bottom: 5px;
  padding-top: 3px;
  display: block;
}

#media_cloud2 .importer .active_list fieldset div input {
  width: 96%;
}

#media_cloud2 .importer .active_list fieldset div select {
  width: 100%;
}

#media_cloud2 .importer .active_list .btn_cta_1c_lrg {
  margin: 10px 0;
}

#media_cloud2 .importer .active_list .scrollbox .short {
  height: 305px;
}

#media_cloud2 .importer .active_list .scrollbox {
  width: 100%;
  height: 445px;
  overflow: auto;
  *position: relative;
}

#media_cloud2 .importer .active_list ul.selected_photos {
  width: 100%;
  margin: 0 auto;
}

#media_cloud2 .importer .active_list ul.selected_photos li {
  width: 53px;
  height: 60px;
  padding: 10px 2%;
  display: block;
  float: left;
}

#media_cloud2 .importer .active_list ul.selected_photos li span {
  display: block;
}

#media_cloud2 .importer .active_list ul.selected_photos li span img {
  border: 1px solid #c2c2c2;
  max-width: 52px;
  max-height: 39px;
}

#media_cloud2 .importer .active_list ul.selected_photos li div.float {
  width: 53px;
  height: 0;
  position: relative;
  z-index: 5;
}

#media_cloud2 .importer .active_list ul.selected_photos li div.float span {
  width: 53px;
  height: 53px;
  display: block;
  background-color: #fff;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

#media_cloud2 .importer .active_list ul.selected_photos li div.float img {
  margin-top: 35%;
}

#media_cloud2 .active_list div.progress_bar {
  margin: 10px auto 30px;
  text-align: center;
  display: none;
}

#media_cloud2 .active_list div.progress_bar h5 {
  margin: 10px 0;
  font-size: 14px;
}

#media_cloud2 .active_list div.progress {
  width: 80%;
  height: 12px;
  margin: 10px auto;
  border: 1px solid #ccc;
  background: url('/MediaLibrary/images/bak_progress_bar.png') repeat-x left center;
  -moz-border-radius: 1000px;
  -webkit-border-radius: 1000px;
  border-radius: 1000px; /* future proofing */
  -khtml-border-radius: 1000px; /* for old Konqueror browsers */
}

#media_cloud2 .active_list div.progress .meter {
  width: 50%;
  height: 100%;
  display: block;
  background-color: #0060a9;
  background: url('/MediaLibrary/images/progress_bar.png') repeat-x left center;
  -moz-border-radius: 1000px;
  -webkit-border-radius: 1000px;
  border-radius: 1000px; /* future proofing */
  -khtml-border-radius: 1000px; /* for old Konqueror browsers */
}

#media_cloud2 .active_list div.progress.sm {
  height: 5px;
  margin: 3px auto;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px; /* future proofing */
  -khtml-border-radius: 2px; /* for old Konqueror browsers */
  display: none;
}

#media_cloud2 .active_list .btn {
  margin: 10px auto;
  display: none;
}

/* ALERT BOX */
#media_cloud2 .alert-box {
  padding: 10px;
  display: none;
}

#media_cloud2 .alert-box img {
  margin-right: 10px;
  vertical-align: middle;
}

#media_cloud2 .alert-box .left {
  line-height: 25px;
}

#media_cloud2 .alert-box > div {
  margin-top: 10px;
}

#media_cloud2 .alert-box div.bad {
  padding: 5px;
  background-color: #f7f0f2;
  color: #db020b;
  display: block;
}

#media_cloud2 .alert-box div.good {
  padding: 5px;
  background-color: #ecf5eb;
  color: #358a2e;
  display: block;
}

/* ----------------------------- JQUERY ACTIVATED CLASSES ----------------------------- */
#media_cloud2 .importer.uploading .hdr .selected {
  width: 100%;
}

#media_cloud2 .importer.uploading .hdr .selected .left {
  display: block;
}

#media_cloud2 .importer.uploading .hdr .htabs {
  display: none;
}

#media_cloud2 .importer.uploading .active_list {
  width: 100%;
}

#media_cloud2 .importer.uploading .active_list .btn_cta_1a_lrg {
  display: none;
}

#media_cloud2 .importer.uploading .tabs {
  display: none;
}

#media_cloud2 .importer.uploading .active_list .progress_bar,
#media_cloud2 .importer.uploading .active_list div.progress.sm,
#media_cloud2 .importer.uploading ul.selected_photos li .float,
#media_cloud2 .importer.uploading .alert-box,
#media_cloud2 .importer.uploading .active_list .btn {
  display: block;
}

#media_cloud2 .importer.uploading .active_list .scrollbox {
  width: 97%;
  height: 400px;
  float: right;
}

#media_cloud2 .importer.uploading .active_list ul.selected_photos li {
  height: 80px;
}

#media_cloud2 .importer.uploading .active_list div#search-box {
  display: none;
}


