/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

body        { background-color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#container  { width:320px; position:relative; margin:0 auto; }

#header,
#content,
#footer     { width:100%; }

#header     { height:60px; background-color:#f2f2f2; }
#content    { background-color:#fff; padding-bottom:140px; }
#footer     { background-color:#111; color:#444; height:100px; margin-top:-100px; position:relative; text-align:center; }

#logo       { float:left; margin: 30px 0 2px 10px; }
#tagline    { float:left; clear:left; font-size:14px; font-weight:500; text-transform:none; text-shadow: 0px 1px 0px #fff; }
#nav        { float:right; font-size:14px; font-weight:500; text-shadow: 0px 1px 0px #fff; }
#nav li     { display:inline; text-transform:none; margin:0 5px; }
#nav li a   { color:black; text-decoration:none; }
#nav li a:hover, #nav li.selected a { color: #00abf3; }
#nav li.selected a { background-color: #eef; }

#copyright  { font-size:12px; padding-top:20px; }
#footer a { color:#444; text-decoration:none; border-bottom: 1px #444 dotted; }





#progress { display:none; }
#notification { display:none; }

/* NAPKIN WIDGET */
#napkin { -webkit-user-select: none; }
#widget, #canvas, #controls { width:320px; margin:0 auto; padding:0; }
#canvas {
    cursor: crosshair;
    height:320px;
}
#widget {
    margin-top:0px;
    background-color:#f2f2f2;
    min-height:320px;
}
#links {
    width:320px;
    height:36px;
    background-color:#f2f2f2;
    text-align:center;
}
#links a {
    color: black;
    text-decoration: none;
}
#links a:hover {
    color: #00abf3;
}
#controls {
    width:320px;
    height:36px;
}
/* CONTROLS */
#controls div#color,
#controls button {
    float:left;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    margin:0;
    margin-top:2px;
    margin-right:4px;
    background-color: white;
}
#controls button {
    background-image: url(/static/i/toolbox-new.png?v=cf9e3);
    background-repeat: no-repeat;
}
#controls button#pen1 {
    margin-left:5px;
}
#controls button#save {
    margin-left:9px;
    margin-right:0;
}
#controls button#text { display:none; }

#controls button:active,
#controls .btn-selected { background-position-y: -30px; }
#controls button:disabled, #controls button.disabled { background-position-y: -60px; }

    .palette { background-color:#f2f2f2; padding:5px; }
    .palette div { float:left; border:0px solid white; margin:1px; width:18px; height:18px; }
    #colors { display:none; position:absolute; top:310px; left:10px; width:280px; padding:10px;
              -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
              -webkit-box-shadow: 2px 2px 2px #aaa; -moz-box-shadow: 2px 2px 2px #aaa;
    }

#color div { width:24px; height:24px; background-color:black; margin:1px; padding:0; border:2px solid white; } 



#pen1 { background-position: 0 0; }
#pen2 { background-position: -30px 0; }
#pen3 { background-position: -60px 0; }
#erase{ background-position: -90px 0; }
#text { background-position: -120px 0; }
#undo { background-position: -150px 0; }
#redo { background-position: -180px 0; }
#clear{ background-position: -210px 0; }
#save { background-position: -240px 0; }
/* damn firefox */
#pen1:active, #pen1.btn-selected { background-position: 0 -30px; }
#pen2:active, #pen2.btn-selected { background-position: -30px -30px; }
#pen3:active, #pen3.btn-selected { background-position: -60px -30px; }
#erase:active, #erase.btn-selected { background-position: -90px -30px; }
#text:active, #text.btn-selected { background-position: -120px -30px; }
#undo:active, #undo.btn-selected { background-position: -150px -30px; }
#redo:active, #redo.btn-selected { background-position: -180px -30px; }
#clear:active, #clear.btn-selected { background-position: -210px -30px; }
#save:active, #save.btn-selected { background-position: -240px -30px; }
#pen1:disabled { background-position: 0 -60px; }
#pen2:disabled { background-position: -30px -60px; }
#pen3:disabled { background-position: -60px -60px; }
#erase:disabled { background-position: -90px -60px; }
#text:disabled { background-position: -120px -60px; }
#undo:disabled { background-position: -150px -60px; }
#redo:disabled { background-position: -180px -60px; }
#clear:disabled { background-position: -210px -60px; }
#save:disabled { background-position: -240px -60px; }
#pen1.disabled { background-position: 0 -60px !important; }
#pen2.disabled { background-position: -30px -60px !important; }
#pen3.disabled { background-position: -60px -60px !important; }
#erase.disabled { background-position: -90px -60px !important; }
#text.disabled { background-position: -120px -60px !important; }
#undo.disabled { background-position: -150px -60px !important; }
#redo.disabled { background-position: -180px -60px !important; }
#clear.disabled { background-position: -210px -60px !important; }
#save.disabled { background-position: -240px -60px !important; }
/* end damn firefox */

#progress { position:absolute; top:160px; width:320px; margin:0; padding:0; border:0; text-align:center; }

#notification {
    position:absolute;
    top:70px;
    left:10px;
    font-size:12px;
    line-height:16px;
 /*   background-color:black;
    opacity: 0.75;*/
    width:300px;
    background-color:#f2f2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding:10px;
}

#notification a {
    color:#aeacfa;
}

#textinputdiv {
    display:none;
    width:320px;
    margin-top:0px;
    padding-top:6px;
    background-color: #f2f2f2;
    background-image: url(/static/i/tip-top-wht.png?v=ede0b);
    background-position: 104px 0px;
    background-repeat: no-repeat;
}
#textinputdiv input {
    padding:4px;
    border:0;
    width:312px;
    font-family:Arial;
    font-size:12px;
}











/* NOCANVAS */
#nocanvas {
    background-color:white; width:320px; height:320px; padding:0; margin:0; border:0px;
    line-height: 147%;
}
#nocanvas h1 {
    float:left; clear:both;
    font-size: 1em;
    margin-top: 20px;
    padding: 0 20px;
}
#nocanvas p {
    float:left; clear:both;
    font-size: 0.9em;
    margin-top: 20px;
    padding: 0 20px;
    padding-bottom: 20px;
}
#nocanvas a {
    text-align:center;
    float: left;
    width: 120px;
    font-size: 0.7em;
    margin: 0 10px;
    padding: 5px 10px;
    color: #777;
    text-decoration: none;
    line-height:120%;
}
#nocanvas a:hover {
    color: #555;
    background-color: #f2f2f2;
}
#nocanvas a img {
    border: 0;
    display: block;
    margin: 0 auto;
}


/* CRAP */
.spacer { float:none; clear:both; height:0%; }


/* ABOUT and FEEDBACK */
.twocol {
    margin-left:10px;
    width:300px;
    float:left;
}
#about h1, #feedback h1 {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 400;
}
#about p, #feedback p {
    margin-top: 20px;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 147%;
}
#about a, #feedback a {
    color: #00abf3;
    text-decoration: none;
    border-bottom: 1px #00abf3 dotted;
}






       #recaptcha_image {
           background-color: #fff;
           float:left;
       }   
       #recaptcha_image a { 
           margin-left: 10px;
           font-size: small;
       }   
   
       #recaptcha_buttons {
           float:left;
       }   
       .recaptcha-button {
           width:25px;
           height:15px;
           margin-left:3px;
       }   
   
       #feedback label, #about label {
           margin-top: 20px;
           font-family: "Helvetica Neue", Helvetica, Trebuchet MS, Arial, sans-serif;
           color: #555;
           font-size: 0.9em;
           font-weight: bold;
           width: 110px;
           float:left;
           clear:left;
       }   
       #feedback input[type="email"], input[type="text"], #feedback textarea {
           font-size: 0.9em;
           margin-top: 10px;
           padding: 8px;
           width: 284px;
           float:left;
           border: 1px solid #f2f2f2;
           font-family: Georgia, "Times New Roman", serif;
           font-weight: 100;
           line-height: 147%;
       }   
       #feedback textarea {
           height: 14em;
       }   
       #f_submit {
           padding: 10px;
           margin-left: 110px;
           margin-top: 20px;
           border: 0;
           background-color: #555;
           color: #aaa;
           font-weight: bold;
           font-size: 0.9em;
       }   


/* HELP */
#help {
    display:none;
    position:absolute;
    top:80px;
    left:0;
    background: transparent url(/static/i/tip-left.png?v=3ecd4) no-repeat;
    background-position: 0 20px;
    margin-left: 10px;
}   
#help div.inner {
    padding: 10px 20px;
    margin-left: 11px;
    width:240px;
    background-color: #f2f2f2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 2px 2px 2px #aaa;
    -moz-box-shadow: 2px 2px 2px #aaa;
    border-radius: 10px;
    text-shadow: 0px 1px 0px #fff;
}   
#help h3 {
    margin-top: 10px;
    font-weight: 600;
    font-size: 16px;
}   
#help p { 
    margin-top: 20px;
    padding-bottom: 20px;
    font-family: Helvetica Neue, Helvetica, Trebuchet MS, Arial, sans-serif;
    font-family: Georgia, Times New Roman, serif;
    font-weight: 300;
    font-size:14px;
    line-height:127%;
}   
#help div.inner p a { 
    font-weight: bold;
    text-decoration: none;
    color: #555;
    border-bottom: 1px #555 dotted;
}   
#help div.inner p a:hover {
    color: black;
    border-bottom: 1px black dotted;
}  
#help .closebutton {
    position:absolute;
    right:3px;
    top:3px;
    color:#aaa;
    width:17px;
    height:17px;
    background-image: url(/static/i/close.gif?v=199ef);
    cursor:pointer;
}



/* SERVICE MARK */
span.smark {
    font-family: "Lucida Sans Unicode";
    line-height: 0;
}


       #links { text-align:right; color: #aaa; }
       #links a { line-height:28px; font-size: 14px; color:#777; margin-right:10px; text-decoration:none; }
       #links a:hover { color:black; }

.twitter24, .facebook24, .reddit24, .digg24, .friendfeed24, .delicious24, .stumble24, .buzz24
{
    display:block;
    float:left;
    width:24px;
    height:24px;
    border:0;
    padding:0;
    margin:0 2px;
    background-image:url(/static/i/icons/socialsprites.png?v=0bcea);
}

.twitter24      { background-position: 0 0; }
.facebook24     { background-position: -24px 0; }
.reddit24       { background-position: -48px 0; }
.digg24         { background-position: -72px 0; }
.friendfeed24     { background-position: -96px 0; }
.delicious24    { background-position: -120px 0; }
.stumble24      { background-position: -144px 0; }
.buzz24         { background-position: -168px 0; }

.twitter16, .facebook16, .reddit16, .digg16, .friendfeed16, .delicious16, .stumble16, .buzz16
{
    display:block;
    float:left;
    width:16px;
    height:16px;
    border:0;
    padding:0;
    margin:0 1px;
    background-image:url(/static/i/icons/socialsprites.png?v=0bcea);
}

.twitter16      { background-position: 0 -24px; }
.facebook16     { background-position: -16px -24px; }
.reddit16       { background-position: -32px -24px; }
.digg16         { background-position: -48px -24px; }
.friendfeed16     { background-position: -64px -24px; }
.delicious16    { background-position: -80px -24px; }
.stumble16      { background-position: -96px -24px; }
.buzz16         { background-position: -112px -24px; }

#sharelinks { height:24px; }

   #embedlink { text-decoration:none; }
   #embedcodediv { display:none; height:30px; width:280px; }
   #embedcode { background-color:white;
              -webkit-border-radius: 10px;
              -moz-border-radius: 10px;
              margin-top: 10px;
              padding: 8px;
              width: 200px;
              float:left;
              border: 1px solid #f2f2f2;
              font-family: Inconsolata, Consolas, Andale Mono, Monaco, Courier New, monospace;
              font-size: 11px;
              font-weight: 100;
              line-height: 147%;
   }


.galleryad {
    width:100%;
    height:50px;
    margin:10px 0;
    padding:10px 0;
    border:0;
    background-color:#777;
    text-align:center;
    -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;

    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(0,0,0)),
        color-stop(1, rgb(128,128,128))
    )
}

.gallerydrawing {
    position:relative; float:left; width:320px; height:400px; margin-top:30px; background-color:#f2f2f2; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
}

   .pager {
       margin:0 auto;
       margin-top:40px;
       font-size:14px;
   }
   .pager li {
       color:#00abf3;
       display:inline;
       text-align:center;
       padding:0 4px;
   }
   .pager a {
       -webkit-border-radius: 5px;
       background-color:#f2f2f2;
       padding:4px 8px;
       color:#333;
       text-decoration:none;
   }
   .pager a:hover {
       color:#00abf3;
   }


#gallery h1 { font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-weight:400; padding:10px; margin-top:40px; font-size:22px; }
#gallery p { font-family:Georgia,Times New Roman,serif; padding:10px; line-height:147%; }