/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}


#api{
    background: rgba(0, 0, 0, 0) url("../images/api.png") no-repeat scroll 0 0 / 47px 47px;
    bottom: 205px;
    height: 47px;
    left: 17px;
    position: absolute;
    width: 47px;
}

#changeEmail > label, #changePass > label {
    display: block;
        color:#000;
        font-size:11px;
        font-family:Arial, Helvetica, sans-serif;
}
#changeEmail > input, #changePass > input, #changeName > input {
    border:1px solid #b8b8b8;
    height:26px;
    width:261px;
    background:#f3f3f3;
    color: #5f574f;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    margin:5px 0 10px 0;
    padding: 0 0 0 5px;
}

#noty_center_layout_container > li {
    border:none !important;
}
ul { list-style: none outside none !important; }

ul, ol {margin-bottom:0;}

*:focus {
    outline: none;
}
#progressText {width:400px; margin: 30px auto 10px; text-align:left; font-size:13px; color:#5f574f;}
#funFactText {width:400px; margin:20px auto 0; text-align:left; font-size:13px; color:#5f574f; height:75px;}
.sitemap-link, .sitemap-section{
    display:block;
}
.fixText {text-transform:capitalize;}
.updateFormWrapper {
    position:relative;
    width:268px;
    margin:40px auto;
}
.noEditLabel {
    position:absolute;
    left: -40px;
    top: 6px;
}
.noEditField {
    height:26px;
    width:266px;
    line-height:26px;
    margin:5px 0 10px;
}
.fb_photo_box, .db_photo_box {
    background-color: #FFF;
    float:left;
    width: 96px;
    height: 96px;
    padding: 0px;
    background: transparent;
    z-index:1;
}
.uploaded{
    box-shadow:rgba(45,151,100, 0.7) 0 0 0 6px inset;
    position: relative;
}
#dropzoneBtn{
    width:150px;
}
.deleteCell {
    position:absolute;
    background:url(../images/deleteCell.png) no-repeat;
    top:0;
    right:0;
    height:15px;
    width:15px;
}
.Bttn {
  background: #f79857;
  background-image: -webkit-linear-gradient(top, #f79857, #f48240);
  background-image: -moz-linear-gradient(top, #f79857, #f48240);
  background-image: -ms-linear-gradient(top, #f79857, #f48240);
  background-image: -o-linear-gradient(top, #f79857, #f48240);
  background-image: linear-gradient(to bottom, #f79857, #f48240);
  padding: 5px 20px;
  text-decoration: none;
  text-align:center;
}

.Bttn:hover {
  background: #f48240;
  background-image: -webkit-linear-gradient(top, #f48240, #f79857);
  background-image: -moz-linear-gradient(top, #f48240, #f79857);
  background-image: -ms-linear-gradient(top, #f48240, #f79857);
  background-image: -o-linear-gradient(top, #f48240, #f79857);
  background-image: linear-gradient(to bottom, #f48240, #f79857);
  text-decoration: none;
}

.blueBtn {
  background: #186e8a;
  background-image: -webkit-linear-gradient(top, #2887a9, #186e8a);
  background-image: -moz-linear-gradient(top, #2887a9, #186e8a);
  background-image: -ms-linear-gradient(top, #2887a9, #186e8a);
  background-image: -o-linear-gradient(top, #2887a9, #186e8a);
  background-image: linear-gradient(to bottom, #2887a9, #186e8a);
  text-decoration: none;
    user-select: none;
    text-decoration: none;
  display:inline-block;
  line-height:30px;
  height:30px;
  cursor: pointer;
  text-align:center;
  color:#fff;
  font-size:16px;
  padding-left:20px;
  padding-right:20px;
    box-sizing:border-box;
    user-select: none;
}
.blueBtn:active {
  background: #186e8a;
  background-image: -webkit-linear-gradient(top, #186e8a, #2887a9);
  background-image: -moz-linear-gradient(top, #186e8a, #2887a9);
  background-image: -ms-linear-gradient(top, #186e8a, #2887a9);
  background-image: -o-linear-gradient(top, #186e8a, #2887a9);
  background-image: linear-gradient(to bottom, #186e8a, #2887a9);
  text-decoration: none;
}
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.hide {
    display:none;
}
.show {
    display:block;
}

#loginArea {
    position:relative;
}
#emailInfo {
    position:absolute;
    right:40px;
    top:410px;
    width:240px;
    font-size:10px;
    font-weight:500;
}
#priceInfo {
    position:absolute;
    right:170px;
    top:210px;
    width:110px;
    font-size:10px;
    font-weight:500;
}
.infoIcon {
    width:23px;
    height:22px;
    background:url(../images/infoIcon.png) no-repeat;
    padding: 0 5px 0 0;
}
.googleLogo {
    width:25px;
    height:20px;
    background:url(../images/socialButtonSprite.png) no-repeat;
    background-position:0 0;
}

.facebookLogo {
    width:25px;
    height:20px;
    background:url(../images/socialButtonSprite.png) no-repeat;
    background-position:-26px 0;
}
.googleBtn {
      -moz-user-select: none;
    display: inline-block;
    font-family: arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
        background-color: #dd4b39;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
        font-size: 12px;
    height: 31px;
    line-height: 31px;
        font-weight: bold;
        padding: 0 5px;
}
.googleBtn:hover {
        background-color: #e74b37;
        box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset;
}
.fbBtn {
      -moz-user-select: none;
    display: inline-block;
    font-family: arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
        background-color: #476aa6;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
        font-size: 12px;
    height: 31px;
    line-height: 31px;
        font-weight: bold;
        padding: 0 5px;
}
.fbBtn:hover {
        background-color: #617db3;
        box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset;
}

.googleBtnLogo {
      background: url("//ssl.gstatic.com/s2/oz/images/sprites/signinbutton-094c03c836f9f91d08b943a90778d34e.png") no-repeat scroll -32px -44px rgba(0, 0, 0, 0);
    height: 32px;
    margin-top: -1px;
    width: 32px;
        border-color: #bb3f30;
        border-right-width: 1px;
        display: inline-block;
    vertical-align: top;
}
.googleBtnText{
    border-radius: 0 3px 3px 0;
  display: inline-block;
    padding: 0 20px;
}
#sourcePreview {
    padding:3px;
    border: 3px solid #f78f4b;
}
.number {
    max-width:.5em;
    margin:0 auto;
    line-height:35px;
}
input[type=text] {
    width:150px;
    padding:0px 10px;
}
#fblogin, #fbRegister {
    margin-right:15px;
}

progress {
    width: 400px;
    height: 54px;
    margin: 10px auto;
    display: block;
    /* Important Thing */
    -webkit-appearance: none;
    border: none;
}

/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
    background: black;
    padding: 2px;
    box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}

/* Now the value part */
progress::-webkit-progress-value {
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
    background:
        -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
        -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
        -webkit-linear-gradient(left, #ba7448, #c4672d);

    /* Looks great, now animating it */
    background-size: 25px 14px, 100% 100%, 100% 100%;
    -webkit-animation: move 5s linear 0 infinite;
}

/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties  */

@-webkit-keyframes move {
    0% {background-position: 0px 0px, 0 0, 0 0}
    100% {background-position: -100px 0px, 0 0, 0 0}
}


#fbUploadBtn {
    margin:23px 0 0 222px;
    width: 220px;
    text-align:center;
    background:#f78f4b;
    height:34px;
    line-height:34px;
    text-align:center;
}

.igBtn {
      -moz-user-select: none;
    display: inline-block;
    font-family: Roboto,arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
        background-color: #517fa4;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
        font-size: 12px;
    height: 31px;
    line-height: 31px;
        font-weight: bold;
        padding: 0 5px;
}
.igBtn:hover {
        background-color: #67a0ce;
        box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset;
}

.flickrBtn {
      -moz-user-select: none;
    display: inline-block;
    font-family: Roboto,arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
        background-color: #ff0084;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
        font-size: 12px;
    height: 31px;
    line-height: 31px;
        font-weight: bold;
        padding: 0 5px;
}
.flickrBtn:hover {
        background-color: #ff3ea2;
        box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset;
}

.dropboxBtn {
      -moz-user-select: none;
    display: inline-block;
    font-family: Roboto,arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
        background-color: #007ee5;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
        font-size: 12px;
    height: 31px;
    line-height: 31px;
        font-weight: bold;
        padding: 0 5px;
}
.dropboxBtn:hover {
        background-color: #0289f7;
        box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset;
}

.redBtn {
  background: #c73d3d;
  background-image: -webkit-linear-gradient(top, #c73d3d, #b82929);
  background-image: -moz-linear-gradient(top, #c73d3d, #b82929);
  background-image: -ms-linear-gradient(top, #c73d3d, #b82929);
  background-image: -o-linear-gradient(top, #c73d3d, #b82929);
  background-image: linear-gradient(to bottom, #c73d3d, #b82929);
  line-height:34px;
  height:34px;
  text-decoration: none;
}

.redBtn:hover {
  background: #b82929;
  background-image: -webkit-linear-gradient(top, #b82929, #c73d3d);
  background-image: -moz-linear-gradient(top, #b82929, #c73d3d);
  background-image: -ms-linear-gradient(top, #b82929, #c73d3d);
  background-image: -o-linear-gradient(top, #b82929, #c73d3d);
  background-image: linear-gradient(to bottom, #b82929, #c73d3d);
  text-decoration: none;
}
.orangeBtn {
 background-color: #F79857; background-image: -webkit-gradient(linear, left top, left bottom, from(#F79857), to(#F48240));
 background-image: -webkit-linear-gradient(top, #F79857, #F48240);
 background-image: -moz-linear-gradient(top, #F79857, #F48240);
 background-image: -ms-linear-gradient(top, #F79857, #F48240);
 background-image: -o-linear-gradient(top, #F79857, #F48240);
 background-image: linear-gradient(to bottom, #F79857, #F48240);
 text-decoration: none; text-align:center; box-sizing:border-box;
 height:34px;
 line-height:34px;
 }

.orangeBtn:hover {color:#fff;
 background-color: #F48240; background-image: -webkit-gradient(linear, left top, left bottom, from(#F48240), to(#F79857));
 background-image: -webkit-linear-gradient(top, #F48240, #F79857);
 background-image: -moz-linear-gradient(top, #F48240, #F79857);
 background-image: -ms-linear-gradient(top, #F48240, #F79857);
 background-image: -o-linear-gradient(top, #F48240, #F79857);
 background-image: linear-gradient(to bottom, #F48240, #F79857);}

.brownBtn {
  background: #6b635b;
  background-image: -webkit-linear-gradient(top, #6b635b, #534c44);
  background-image: -moz-linear-gradient(top, #6b635b, #534c44);
  background-image: -ms-linear-gradient(top, #6b635b, #534c44);
  background-image: -o-linear-gradient(top, #6b635b, #534c44);
  background-image: linear-gradient(to bottom, #6b635b, #534c44);
  padding: 5px 5px;
    text-align:center;
}

.brownBtn:hover {
  background: #534c44;
  background-image: -webkit-linear-gradient(top, #534c44, #6b635b);
  background-image: -moz-linear-gradient(top, #534c44, #6b635b);
  background-image: -ms-linear-gradient(top, #534c44, #6b635b);
  background-image: -o-linear-gradient(top, #534c44, #6b635b);
  background-image: linear-gradient(to bottom, #534c44, #6b635b);
  text-decoration: none;
}

.grayBtn {
  background: #8b8b8b;
  background-image: -webkit-linear-gradient(top, #8b8b8b, #757575);
  background-image: -moz-linear-gradient(top, #8b8b8b, #757575);
  background-image: -ms-linear-gradient(top, #8b8b8b, #757575);
  background-image: -o-linear-gradient(top, #8b8b8b, #757575);
  background-image: linear-gradient(to bottom, #8b8b8b, #757575);
  padding: 5px 5px;
    text-align:center;
}

.grayBtn:hover {
  background: #757575;
  background-image: -webkit-linear-gradient(top, #757575, #8b8b8b);
  background-image: -moz-linear-gradient(top, #757575, #8b8b8b);
  background-image: -ms-linear-gradient(top, #757575, #8b8b8b);
  background-image: -o-linear-gradient(top, #757575, #8b8b8b);
  background-image: linear-gradient(to bottom, #757575, #8b8b8b);
  text-decoration: none;
}

.uploadTab { text-align: center; width: 100%; }
.tabList { display: inline-block; }

#deviceTab{width:25px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: 0px 0px !important; }

#fbTab{width:12px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -26px 0px !important; }

#gTab{width:22px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -38px 0px !important; }
#sTab{width:26px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -133px 0px !important; }
#igTab{width:23px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -61px 0px !important; }
#flickrTab{width:22px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -85px 0px !important; }
#dropboxTab{width:23px; height:22px; background:url('../images/tabSpriteNew.png') no-repeat; background-position: -108px 0px !important; }

.ui-tabs-panel {padding:0px !important;}

.tabText {
    line-height:23px;
    margin-left:5px;
}

ul
{
margin: 0;
padding: 0;
}
li {
    display: inline;
}

a {
    text-decoration: none;
}

.click {cursor:pointer;}

.wrapper{width:50%; margin:0 auto; padding-top:55px; text-align:center;}

#devicePhoto, #fbPhoto, #gPhoto, #iPhoto, #flickrPhoto, #dropboxPhoto, #sPhoto {
    height:472px;
    overflow: hidden;
    border-bottom:3px solid #f88f4a !important;
    border-left:3px solid #f88f4a !important;
    border-right:3px solid #f88f4a !important;
}

#devicePhoto {
    height:560px;
}

#pi_container, #pi_container_g, #pi_container_i, #pi_container_flickr, #pi_container_dropbox {
    height:560px;
    border-bottom:3px solid #f88f4a !important;
    border-left:3px solid #f88f4a !important;
    border-right:3px solid #f88f4a !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
.tabHeader{background:#838383; overflow:hidden; padding:17px; border-left: 3px solid #f88f4a !important; border-right: 3px solid #f88f4a !important;}

.ui-progressbar-value {
    background-image: url("../images/pbar-ani.gif") !important;
}

.editBox {
    background: #f79857;
  background-image: -webkit-linear-gradient(top, #f79857, #f48240);
  background-image: -moz-linear-gradient(top, #f79857, #f48240);
  background-image: -ms-linear-gradient(top, #f79857, #f48240);
  background-image: -o-linear-gradient(top, #f79857, #f48240);
  background-image: linear-gradient(to bottom, #f79857, #f48240);
  padding: 18px 25px;
  text-decoration: none;
    width: 192px;
    height: 140px;
}

#loading {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

#loadingImg {
      position: absolute;
    top: 50%;
    left: 50%;
        margin: -5px 0 0 -21px;
}

#progressWrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    display:none;
    z-index:998;
}
#prog {
    margin-top:40%;
    opacity:1;
    position:relative;
    line-height:35px;
    text-align:center;
}
#progLabel {
    float:left;
    width:100%;
    height:100%;
    position:absolute;
    vertical-align:middle;
}
#progress {
    position:fixed;
    top:50%;
    left:50%;
    margin:-11px 0 0 -200px;
  width: 400px;
  height: 22px;
  border: 1px solid #FFF;
  background-color: #292929;
}

#countContainer {
    text-align:center;
    float: right;
    vertical-align:top;
}

.cellPreview {
    overflow:hidden;
    width:52px;
    height:39px;
    margin-right:8px;
    border:1px solid #5f574f;
    text-align:center;
}
.wrapperPadding{
    padding-top:15px;
    line-height:15px;
}
.bottomWrapperPadding{
    padding-top:18px;
    line-height:15px;
}
#contentWrapper {
    width:892px;
    margin:0 auto;
    background:#FFF;
}

#projectsWrapper {
    padding: 0 55px 30px;
    background:#f8f3f0;
}
#gProfile, #fProfile {
    max-width:300px;
}

#signOutBtn{
    width:31px;
    height:30px;
    background:url(../images/logOut.png);
    float:right;
    text-align:center;
    border-left:1px solid #fbbb91;
    border-right:1px solid #fbbb91;
}

.fieldWrapper {
    width: 300px;
    margin:0 auto;
}

.projectName {
    margin:-1px 0 0 8px;
    text-transform: capitalize;
}

.signinWrapper {
    width: 300px;
    background:#f78f4b;
}

#signIn {
    position: absolute;
    right: 0;
    bottom:-337px;
    z-index:10;
}
.navBar {
    position:relative;
    width:100%;
    height: 30px;
    background: #000;
}

#signInToggle {
    width:95px;
    height:30px;
    background:#f78f4b;
    float:right;
    text-align:center;
}

#signInToggle:hover {
    background:#d67d42;
}

.whitebtn {
    background:#FFF;
    padding:10px 10px;
}

.whitebtn:hover {
    background:#f6f6f6;
}
.whiteLine {
    width:121px;
    margin:10px 10px 10px 10px;
    border-top:1px solid #FFF;
}

.brownLine{
    width:117px;
    margin:18px 10px 20px 10px;
    border-top:1px solid #5f574f;
}

.centerText {
    text-align:center;
    margin:0 0 20px 0;
}
#myAccount{
    float:right;
    width:31px;
    height:30px;
    text-align:center;
}
#myAccount:hover #accountArrows {
    background-position:-11px 0;
}

#accountArrows {
    width:9px;
    height:7px;
    background: url(../images/myAccountArrows.png) no-repeat center;
    background-position:0 0;
    margin-top:-1px;
}

#accountGear {
    width:19px;
    height:18px;
    background: url(../images/accountGear.png) no-repeat center;
    background-position:0 0;
    margin:6px auto 0;
}

#menu {
    position:relative;
    height:30px;
}

#menu:hover > ul {
    display: block;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 30px;
    right: -6px;
    z-index: 99999;
    background-color: #e4e2e2;
}

#menu ul a:hover {
    background-color: #f2f2f2;
}

#menu ul a {
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
        width:115px;
        text-align:left;
}
#downloadsLink {
    float:right;
    width:89px;
    height:30px;
    text-align:center;
    line-height:31px;
    background:#1c7da0;
    border-left:1px solid #95cfe5;
}
#myProjects, #myVideos {
    float:right;
    width:86px;
    height:30px;
    text-align:center;
    line-height:30px;
    background:#1c7da0;
    border-left:1px solid #95cfe5;
}

#projectsWrapper {
    overflow: auto;
}
.project {
    width:161px;
    height:155px;
    float: left;
    margin: 15px 34px 15px 0;
    text-align:center;
    overflow:hidden;
    position:relative;
}
.projectOptions {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #f58a48;
  background-image: -webkit-linear-gradient(top, #f58a48, #df7e42);
  background-image: -moz-linear-gradient(top, #f58a48, #df7e42);
  background-image: -ms-linear-gradient(top, #f58a48, #df7e42);
  background-image: -o-linear-gradient(top, #f58a48, #df7e42);
  background-image: linear-gradient(to bottom, #f58a48, #df7e42);
    cursor:pointer;
}
.projectOptions:hover {
    background: #df7e42;
  background-image: -webkit-linear-gradient(top, #df7e42, #f58a48);
  background-image: -moz-linear-gradient(top, #df7e42, #f58a48);
  background-image: -ms-linear-gradient(top, #df7e42, #f58a48);
  background-image: -o-linear-gradient(top, #df7e42, #f58a48);
  background-image: linear-gradient(to bottom, #df7e42, #f58a48);
}
.menuIcon {
    padding-top:7px;
}

.project:hover .deleteProject{
    display:block;
}

.project:hover .projectOptions{
    display:block;
}

.projectText:hover ~ .pencil{
    display:block;
}
.projectText:hover ~ .deleteProject{
    display:none;
}
.deleteProject{
    position: absolute;
    display:none;
    bottom: 35px;
    right: 5px;
    width: 17px;
    height:24px;
    background: url(../images/projectSprite.png) no-repeat center;
    background-position:0 0;
}

.pencil {
    position: absolute;
    display:none;
    bottom: 17px;
    right: 6px;
    width: 14px;
    height:13px;
    background: url(../images/projectSprite.png) no-repeat center;
    background-position:-17px 0;
}
#menuPencil {
    width: 14px;
    height:13px;
    background: url(../images/projectSprite.png) no-repeat center;
    background-position:-17px 0;
    visibility:hidden;
    margin: -1px 0 0 8px;
}

.pencil:hover {
    display:block;
}
.pencil:hover ~ .deleteProject {
    display:none;
}

#newProject {
    width:161px;
    height:120px;
    float: left;
    margin: 15px 34px 15px 0;
    text-align:center;
    background: url(../images/newProject.png) no-repeat;
}

#projectsToggle {
    clear:both;
}

.footer {
    margin-top:0 !important;
}


.editInPlace-active input {
    border:none;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    color:#4d4d55;
    font-size:12px;
    height:14px;
    margin:0;
    padding:0 8px;
    outline: none;
}

.projectName input {
    border:none;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#4d4d55;
    font-size:19px;
    background:transparent;
    font-weight:bold;
    height:25px;
    line-height:30px;
    margin:-5px;
    padding:0 5px;
    outline: none;
    width:auto;
    min-width:150px;
}


.editInPlace-active input:active .pencil {
    display:none;
}

.customDrop select {
   background: transparent;
   width: 263px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
    -webkit-appearance: none;
}

.customDrop{
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(../images/dropArrow.png) no-repeat 96% #dcdcdc;
     float:left;

}

.selectBtn {
    width:116px;
    text-align:center;
    height:34px;
    line-height:34px;
    background:#dcdcdc;
    float:left;
    margin-left:20px;
}

input[type="radio"] {
   position:absolute;
   opacity: 0;
   -moz-opacity: 0;
   -webkit-opacity: 0;
   -o-opacity: 0;
     margin-left:5px;
}
input[type="radio"] + label {
   position:relative;
   padding: 0 0 0 25px;
   font-size: 16px;
   line-height: 16px;
}
input[type="radio"] + label:before {
   content:"";
   display:block;
   position:absolute;
   top:2px;
   height: 14px;
   width: 14px;
   background: white;
   border: 1px solid gray;
   box-shadow: inset 0px 0px 0px 2px white;
   -webkit-box-shadow: inset 0px 0px 0px 2px white;
   -moz-box-shadow: inset 0px 0px 0px 2px white;
   -o-box-shadow: inset 0px 0px 0px 2px white;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -o-border-radius: 8px;
     border-radius: 8px;
}
input[type="radio"]:checked + label:before {
   background: #ef8700;
}
img{
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.dz-progress {
}

#mosaicProgress{
    display:block;
    padding:40px 60px 0px;
    text-align:center;
}
#controlsWrapper {
    display:none;
}
#canvasWrapper {
    margin:20px auto 0;
}
.selectors {
    margin:0 auto;
    width:712px;
    border: 1px solid #b4aea9;
    background:#f5f5f5;
}
.sliderWrapper {
    padding:20px 20px;
}
#colorOverlaySlider, #sourceOverlaySlider {
    width:266px;
}
#messageArea {
    width:60%;
    margin:200px auto;
    text-align: center;
}
#deleteForm {
    width:60%;
    margin:200px auto;
    text-align: center;
}
#deleteConfirm {
    margin:20px 8px 0 0;
}
#cellCounter {
    display:inline-block;
    vertical-align:top;
}
input[type=checkbox] {
    visibility: hidden;
}

.roundedOne {
    width: 28px;
    height: 28px;
    background: #fcfff4;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 10px auto 10px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
}

.roundedOne label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #FF9900;

    background: -webkit-linear-gradient(top, #FF9900 0%, #FFA319 100%);
    background: -moz-linear-gradient(top, #FF9900 0%, #FFA319 100%);
    background: -o-linear-gradient(top, #FF9900 0%, #FFA319 100%);
    background: -ms-linear-gradient(top, #FF9900 0%, #FFA319 100%);
    background: linear-gradient(top, #FF9900 0%, #FFA319 100%);

    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.roundedOne label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.roundedOne:hover ~ .sizeLabel {
    visibility:visible;
}

.roundedOne:active ~ .sizeLabel {
    visibility:visible;
}
.btn-option {
    border: none;
    border-top:1px solid #FFF;
    display:block;
    margin:0 !important;
    width:100%;
    height:60px;
    line-height:35px;
}
.btn-option:before {
  content: "";
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 5px 0 0;
  background: url(../images/menuSprite.png) no-repeat;
}
.btn-noclick {
    border: none;
    border-top:1px solid #FFF;
    display:block;
    margin:0 !important;
    width:100%;
    height:60px;
    line-height:35px;
}

.btn-noclick:before {
  content: "";
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 5px 0 0;
  background: url(../images/menuSprite.png) no-repeat;
}

.editBtn:before {
    background-position: 0 0;
}

.reviewBtn:before {
    background-position: -35px 0;
}

.noReviewBtn:before {
    background-position: -70px 0;
}

.exploreBtn:before {
    background-position: -105px 0;
}

.noExploreBtn:before {
    background-position: -140px 0;
}
.duplicateBtn:before {
    background-position: -175px 0;
}
.trashBtn:before {
    background-position: -210px 0;
}


.noty_cancel {
    border: none;
    display:inline-block;
    margin:0 !important;
    width:34px;
    height:34px;
    background:#474242;
    line-height:34px;
    text-align:center;
}
.noty-project {
    display:inline-block;

}
.noty_project_title {
    text-transform:capitalize;
}
.noty_steps {
    background: #FFF;
    width:256px !important;
    text-align:left !important;
}
.noty_text {
    word-wrap: break-word;
    font-family:Arial, Helvetica, sans-serif;
}
.noty_steps + div {
    padding:0 !important;
}

.noty_message{
    background-color:#fff;
}
.statsWrapper {
    width:148px;
}
.statWrapper {
    clear:both;
}

#fbShare, #copyShare, #pinShare, #twShare, #googleShare {
    width:28px;
    height:28px;
    margin-left:6px;
}

#fbShare {
    background:url(../images/shareSprite.png) no-repeat;
    background-position:0 0;
}
#copyShare {
    background:url(../images/shareSprite.png) no-repeat;
    background-position:-136px 0;
}

#pinShare {
    background:url(../images/shareSprite.png) no-repeat;
    background-position:-68px 0;
}
#twShare {
    background:url(../images/shareSprite.png) no-repeat;
    background-position:-34px 0;
}
#googleShare {
    background:url(../images/shareSprite.png) no-repeat;
    background-position:-102px 0;
    display: none;
}


.modal, .modal2 {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -400px;
    background-color: #FFF;
    text-align: center;

    /* needed styles for the overlay */
    z-index: 10000; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

.modal2 {
        height:550px;
}

.loading {
        position: fixed;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 80px;
    margin-left: -65px;
    margin-top: -35px;
    text-align: center;

    background: #FFF;
    /* needed styles for the overlay */
    z-index: 10000; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}
.modal_inner {
    margin:10px 10px;
}

#shareMenu {
    position:relative;
    height:30px;
}

#shareMenu:hover > ul {
    display: block;
}

#shareMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 99999;
    background-color: #e4e2e2;
}

#shareMenu ul div:hover {
    background-color: #f2f2f2;
}

#shareMenu ul div {
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
        width:185px;
        text-align:left;
        border-bottom:1px solid #eeeeee;
}

#shareSettings {
    width:28px;
    height:28px;
    margin:4px 0 0 6px;
    background:url(../images/privacySprite.png) no-repeat;
    background-position:0 0;
    cursor:pointer;
}
#shareArea {
    display: table;
  table-layout: fixed;
    width:100%;
    margin:15px 0;
    background:#f7f7f7;
}
#shareDisplay {
    width:18%;
    display: table-cell;
    vertical-align:middle;
}
#mosaicTitle {
    width:37%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#shareLinks {
    width:26%;
    display: table-cell;
    vertical-align:middle;
}
#greyHR{
    width:1px;
    height: 24px;
    margin-left: 4px;
    margin-right: 4px;
    background-color:#878787;
}
#purchaseBtnWrapper {
    width:765px;
    margin:30px auto;
}
#freeProof, #purchasePrint, #purchaseDigital,#freePremium {
    width: 150px;
    height: 40px;
    line-height: 15px;
    box-sizing: content-box;
    font-size: 14px;
    color: #656565;
}
#freeProof, #purchaseDigital,#freePremium {
    margin-left: 22px;
}
#goBackFinalize {
    width:153px;
    height:40px;
    background:url(../images/goBackSprite.png) no-repeat;
    background-position:0 -43px;
    margin:0 45px 0 88px;
}
#goBackShare {
    width:153px;
    height:40px;
    background:url(../images/goBackSprite.png) no-repeat;
    background-position:0 0;
    margin:0 65px 0 88px;
}
.greenBtn {
    background: #5ea01b;
  background-image: -webkit-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -moz-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -ms-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -o-linear-gradient(top, #5ea01b, #468b0f);
  background-image: linear-gradient(to bottom, #5ea01b, #468b0f);
  padding: 5px 20px;
  text-decoration: none;
    text-align:center;
    line-height:31px;
}
.greenBtn:hover {
    background: #5ea01b;
  background-image: -webkit-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -moz-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -ms-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -o-linear-gradient(top, #5ea01b, #468b0f);
  background-image: linear-gradient(to bottom, #5ea01b, #468b0f);
}
#loadedProjectOptions {
    width:30px;
    height:30px;
    margin:0;
    text-align:center;
    background:#b7b6b6;
}
#stepsWrapper {
    margin-top:30px;
}
.sectionWrapper {
    background: none repeat scroll 0 0 #f2f2f2;
    margin: 15px auto;
    padding: 30px;
    width: 784px;
        position:relative;
}

#uploadUsing {
    position:absolute;
    top:250px;
    left:50px;
    width:178px;
    height:117px;
    border:1px solid #555555;
    background:url(../images/uploadUsing.png) no-repeat center;
}
.uploadUsingFb {
    height:33px;
    width:32px;
    position:absolute;
    top:17px;
    left:73px;
}
.uploadUsingG {
    height:33px;
    width:32px;
    position:absolute;
    top:68px;
    left:125px;
}
#proofLogo, #printLogo, #digitalLogo,#freeLogo {
    width:34px;
    height:34px;
    background:url(../images/sharebuttonssprite2.png) no-repeat;
}

#proofLogo {
    background-position: 0 0;
    margin:4px 8px 0 0;
}
#freeLogo{
    background-position:-35px 0;
    margin:4px 8px 0 0;
}
#printLogo {
    background-position:-70px 0;
    margin:4px 6px 0 0;
}
#digitalLogo {
    background-position:-105px 0;
    margin:4px 6px 0 0;
}

.shareBtn {
    background: #FFF;
  background-image: -webkit-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -moz-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -ms-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -o-linear-gradient(top, #FFF, #e0e0e0);
  background-image: linear-gradient(to bottom, #FFF, #e0e0e0);
    border:1px solid #c8c8c8 !important;
    padding: 5px 10px;
  text-decoration: none;
    text-align:center;
}
.shareBtn:hover {
    background: #FFF;
  background-image: -webkit-linear-gradient(top, #e0e0e0, #FFF);
  background-image: -moz-linear-gradient(top, #e0e0e0, #FFF);
  background-image: -ms-linear-gradient(top, #e0e0e0 #FFF);
  background-image: -o-linear-gradient(top, #e0e0e0, #FFF);
  background-image: linear-gradient(to bottom, #e0e0e0, #FFF);
}

.inactiveBtn {
    background: #e0e0e0;
    border:1px solid #c8c8c8 !important;
    padding: 5px 10px;
}

#ratioInfo {
    position: absolute;
    bottom: 144px;
    right:15px;
    width:200px;
}
.clearAll {
    background:url(../images/clearAll.png) no-repeat;
    background-position:right;
    margin:5px 0 10px;
}
.loadingText {
    font-size:23px;
    font-weight:bold;
    color:#8799a9;
    font-family:Arial, Helvetica, sans-serif;
    width:130px;
    text-align:center;
    position:absolute;
    left:0;
    bottom:5px;
}
.loadingShadow {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
}

input[type=checkbox].css-checkbox {
    position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left:30px;
    height:27px;
    display:inline-block;
    line-height:27px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:27px;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -27px;
}
label.css-label {
    background-image:url(../images/checkSprite.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#pageLikes{
    width:96px;height:20px;background-color:#e1e1e1;border:1px solid #c8c8c8;font-size:11px;text-align:center;color:#65696d;float:right;line-height:20px;
}
#pageLikesWrapper{
    width:100%; margin:0 auto;margin-top: -15px;height: 1px;
}