*	{ margin:0; padding:0; }
body {
    overflow-y:scroll !important;
    font:12px/1 Helvetica,arial,sans-serif;
    background:#ccc url(../images/bg-pattern.png);
}
a	{ text-decoration:none; }

/* Tool Panel
----------------------------------*/
#tool-panel {
    position:fixed; top:0; left:0; z-index:3000;
    width:100%; height:48px;
    background:#464646 url(../images/tool-panel-bg.png) repeat-x fixed 0 0;
}
#tool-panel a#logo {
    position:absolute; z-index:2;
    height:24px; bottom:0; left:48px; padding-left:54px;/* 48+6 */
    background:url("../images/logo-half.png") no-repeat top left;
    color:#666; font-size:14px; line-height:24px;
}
#tool-panel a#logo:hover {
    background:url(../images/logo-half.png) no-repeat bottom left;
    color:#fff;
}

#tool-panel>div {
    min-width:440px; height:24px; margin:0 auto; padding:12px 240px;
    text-align:center;
}

#tool-panel>div>a  {
    display:inline-block;
    width:20px; height:20px; padding:2px 5px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#D2D2D2)); -webkit-box-shadow: #222 2px 2px 2px;
    color:#000;
    text-shadow: 0 1px 0 #f5f5f5;
}
#tool-panel>div>a.active, #tool-panel>div>a:hover { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e5e5e5)); }
#tool-panel>div>a:active { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5e5e5), to(#ddd)); }

#tool-panel>div>a>span, #exit span {
    display:inline-block;
    width:20px; height:20px;
    background-image:url(../images/icons.png); background-repeat:no-repeat;
}
#tool-panel>div>a>b {
    float:left;
    width:20px; height:20px;
    background-image:url(../images/icons.png); background-repeat:no-repeat;
}
#tool-panel #undo { 
    visibility:hidden; /*float:right; resize need*/
    margin-right:10px; padding:2px 7px; -webkit-border-radius:6px;
}
#tool-panel #undo { margin-right:0px; }/*v2.0*/

#tool-panel #crop { -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; padding-left:6px; border-right:1px solid #c1c1c1; }
#tool-panel #rectangle { border-left:1px solid #efefef; }
#tool-panel #text { border-right:1px solid #c1c1c1; }
#tool-panel #color { -webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; position:relative; padding-right:6px; border-left:1px solid #efefef; margin-right:10px; }
#resize { 
    float:right;
    width:60px !important; margin-right:10px; border-radius:6px;
}
#tool-panel #save, #tool-panel #done, #tool-panel #cancel { -webkit-border-radius:6px; width:auto; padding:2px 8px 2px 6px; font-size:14px; line-height:20px; }
#tool-panel #done, #tool-panel #cancel { display:none; }
#tool-panel #done { margin-right:20px; font-size:13px !important; font-weight:bold;/*v2.0*/ }
#tool-panel>div>a#save { 
    vertical-align: top;
    height: 18px; margin-left:40px; border: 1px solid #f5f5f5;
    font-weight:bold; font-size: 13px !important; line-height: 18px;
    /*float:right; margin-right:-400px;*/  }/*v2.0*/

/* feedback buttons */
#feedback {
	display:none;
	float:right;
	list-style:none;
	height:22px;
	margin-top:26px; margin-right: 200px;
	padding-left:89px; 
}

#feedback li {
	position: relative;
	float:left;
	height:19px;
	margin-top: 3px; margin-right: 12px;
	-webkit-transition-property:margin-top;
	-webkit-transition-duration: 0.1s;
	-webkit-transition-timing-function: ease-in-out; 
}
li#domeafavor, li#recommend {
	margin-top:0; margin-right:15px;
	-webkit-transition:none;
}
li#domeafavor {
	width:74px; height:22px;
	background:transparent url(../images/text-domeafavor.png) 0 50% no-repeat;
}
li#recommend {
	width:63px; height:22px;
	margin-left: 40px;
	background:transparent url(../images/text-recommend.png) 0 50% no-repeat;
}

#feedback li:hover {
	height:22px;
	margin-top: 0;
	-webkit-transition-property:height, margin-top;
	-webkit-transition-duration: 0.1s, 0.1s;
	-webkit-transition-timing-function: ease-in-out, ease-in-out; 
}
#feedback li::before {
	content:'';
	position:absolute;
	top:-20px; left: -137px;
	width:300px;
	text-align: center;
	color:#F5F5F5;
	font-weight: bold;
}
li#tweet {
	width:24px;
}
li#tweet:hover::before {
	content:'__MSG_tweet__';
}
li#rating {
	width:26px;
}
li#rating:hover::before {
	content:'__MSG_rating__';
}
li#cemail {
	width:28px;
}
li#cemail:hover::before {
	content:'__MSG_cemail__';
}
li#diigo_web_highlighter {
	width:24px;
}
li#diigo_web_highlighter:hover::before {
	content:'__MSG_diigo_web_highlighter__';
}

#feedback li a {
	display:inline-block;
	width:100%; height:100%;
	background:#FFF url(../images/icons-options.png) 0 0 no-repeat;
}
#feedback li:hover a {
	background-position-y:-19px;
}

li#tweet a {
	background-position:0 0;
}
li#rating a{
	background-position:-24px 0;
}
li#cemail a {
	background-position:-50px 0;
}
li#diigo_web_highlighter a {
	background-position:-78px 0;
}

/* exit button */	
#exit {
    position:fixed; top:12px; right:10px;
    padding: 2px 5px;
}
#exit span { background-position:-320px -20px; }
#exit:hover span { background-position:-320px 0; }

/* deprecated
span.tip { float:left; margin:0 10px; font-size:12px; line-height:24px; color:#eee; }
span.annotate { 
	float:left; 
	margin-right:-20px; padding:0 24px 0 12px; border-radius:12px; background-color:#D5D5D5;
	font-size:14px; line-height:24px; color:#000;
}*/

#undo span { background-position:-200px 0; }
#undo.disable:hover { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#D2D2D2)) !important; }
#crop span { background-position:0 0; }
#rectangle span { background-position:-20px 0; }
#ellipse span { background-position:-40px 0; }
#arrow span { background-position:-60px 0; }
#line span { background-position:-80px 0; }
#free-line span { background-position:-100px 0; }
#blur span { background-position:-240px 0; }
#text span { background-position:-120px 0; }
#tool-panel #color>span { -webkit-background-clip:content-box; width:16px; height:16px; padding:2px; background-position:-140px 0; background-color:#F00; }
#color ul {
    position:absolute; top:30px; left:-49px; list-style:none;
    display:none; width:121px; height:39px; padding:7px 3px 9px 5px;
    background:url(../images/color.png) no-repeat 0 0;
}
#color ul:before {
    content:url(../images/color-arrow.png);
    position:absolute; top:-10px; left:61px; z-index:1;
}
#color ul li { 
    float:left; width:17px; height:17px; border:1px solid #5F92FF; margin:0 1px 1px 0;
}
#color ul li:hover {
    border-color:#fff;
}

/*#resizer span { 
	width:30px; 
	border-right: 1px solid #C1C1C1;
}*/
#resizer ul { }

#save b { background-position:-160px 0; margin-right:4px; }
#save b { background-position:-220px -1px; }/*v2.0*/
#done b { background-position:0 0; margin-right:4px; }
#cancel b { background-position:-180px 0; margin-right:4px; }

/* Edit Area
----------------------------------*/
#edit-area {
    -webkit-box-shadow: 5px 5px 10px #404040;
    position:relative; overflow:hidden;
    margin:48px auto 0; ;
}
#edit-area.add-margin { margin-top:88px; margin-bottom:48px; }
#save-image, #save-tip, #re-edit, #helper { display:none; }
canvas, #helper, #crop-tip { position:absolute; top:0; left:0; }

#edit-area div[contenteditable] { 
    display:none; position:absolute; outline:none; overflow:hidden;
    background:rgba(255,255,255,0);
    font:bold 14px/18px Arial,Helvetica,sans-serif; text-align:left;
}	
#input-helper { 
    visibility:hidden; font:bold 14px/18px Arial,Helvetica,sans-serif; text-align:left;
}
input { 
    position:absolute;
    border:none; outline:none; background:rgba(255,255,255,0);
    font:bold 14px/18px Arial,Helvetica,sans-serif; text-align:left;
}

#helper { position:absolute; width:100%; height:100%; }
#helper>* { position:absolute; }
#crop-tip { 
    display:inline-block; z-index:1;
    width:140px; padding:0 10px; border-radius:10px; background-color:rgba(0, 0, 0, 0.7);
    color:#eee; text-align:center; line-height:20px;
}
#crop_size { 
    display:none; position:absolute; z-index:5000; top:-30px; left:0;
    min-width:60px; padding:0 10px; border-radius:10px; background-color:rgba(0, 0, 0, 0.7); cursor:default;
    color:#eee; text-align:center; line-height:20px;
}
#top { top:0; left:0; }
#right { top:0; right:0; }
#bottom { right:0; bottom:0; }
#left { bottom:0; left:0; }
#center { cursor:move; }
#center div { display:none; }

.lightLink{
    display:inline !important;
    float:none !important;
}
/* Promote 
----------------------------------*/
#promote {
    display:none;
    position:fixed; bottom:0; right:0;
    width:84px; height:101px;
    background:url(../images/corner-collapsed.png) right bottom no-repeat;
    cursor:pointer;
    color: #fff;
}
#promote.expanded {
    width:700px; height:382px;
    background-image:url(../images/corner-expanded.png);
}
#promote #content {
    display: none;
    margin-top: 340px;
    margin-right:100px;
    text-align: right;
}
#promote p{
    line-height: 2;
    margin-bottom: 10px;
}
#promote a { 
    color:#fff;
    text-decoration:none;
    background-color:#333;
    padding:0 5px;
    border-radius:5px;
}
#promote a:hover {
    text-decoration:none;
    background-color:#000;
    color:#fff;
}
#promote #diigo_highlighter{
    font-size: 13px;
}
#promote #diigo_highlighter a{
    font-weight: bold;
    font-size: 12px;
}

/* Crop
----------------------------------*/
body.crop #edit-area div[contenteditable] { display:none; } /* add 'body' to over-write .draw-text */

.crop #helper { display:block; cursor:crosshair; }
.crop #center div { display:none !important; }

/* Selected
----------------------------------*/
.selected #tool-panel>div { text-align:center; }
.selected #tool-panel>div a,
.selected .tip, .selected .annotate { display:none; }
.selected #tool-panel>div a#done, 
.selected #tool-panel>div a#cancel { display:inline-block; }


.selected #top, 
.selected #right,
.selected #bottom,
.selected #left { background-color:rgba(0, 0, 0, 0.25); cursor:default;  }
.selected #center div { display:block !important; }

/* Cropped
----------------------------------*/
.cropped #tool-panel #undo { visibility:visible; }
.cropped #edit-area { margin-top:88px; }

/* resized
----------------------------------*/
.resized #tool-panel #undo { visibility:visible; }

/* Draw
----------------------------------*/
.draw #show-canvas { cursor:crosshair; }
.draw #draw-canvas:hover { 
    cursor:move !important;
}
.draw_free_line #draw-canvas:hover { 
    cursor:crosshair !important;
}

/* Draw Blur
----------------------------------*/
.draw-blur #show-canvas { 
    /** 2010-08-04 18:01:36
	Must add 'default' keyword, 
	otherwise there is a f**king annoying bug
	(cursor image just don't show up)
	which wasted me one afternoon! 
	*/
    cursor: url(../images/cursor-blur.png), default;
}
/* Draw Text
----------------------------------*/
.draw-text #edit-area div[contenteditable] { display:block; }
.draw-text #show-canvas { cursor:text; }

/* Save
----------------------------------*/
.save #tool-panel>div { display:none; }
.save #feedback { display:block !important; }

body.save #edit-area {
    overflow:visible;
    margin-top:100px;
    padding:1px 5% 0;/*1px for save-image top outline*/
    border:none;
    width:90% !important; height:auto !important;
    outline:none;
    -webkit-box-shadow: none;
}

#save_image_wrapper {
    float:left;
    padding-bottom:15px;
    width:50%;
    text-align:center;
}

.save #save-image { 
    display:block;
    /* width:100%; */
    -webkit-box-shadow:0 5px 10px #404040;
    margin: 10px auto 20px auto;
}
.save #re-edit {
    display:inline-block;
    padding:3px 5px;
    background-color:#404040;
    color:#eee;
    border-radius:5px;
}
.save #re-edit:hover { 
    background-color:#101010;
    color:#fff;
    text-decoration:none;
}

.save #promote  {
    display:block;
}

.save #save-tip { display:block; width:48%; float:right; }
.save #save-tip>div { 
    text-shadow: 0 -1px 0 #404040;
    float:left;
    width:80%; margin-bottom: 10px; padding-left:15%; background:url(../images/arrow.png) no-repeat 0 50px;
    font-weight:bold;
    color: #f5f5f5;
}
.save #save-tip h2 { padding-bottom:40px; color: #57d4ff; font-size:20px; }
.save #save-tip h3 { font-size:13px; }
.save #save-tip dt { color: #ddd; padding:20px 0 10px; font-size:13px; line-height:1.4em; }
.save #save-tip dd { padding-left:62px; font-weight:normal; font-size:13px; line-height:24px; }

#share+dd div { display:none; line-height:18px; }
#error { line-height: 20px !important; }

#save_local+dd p+p { font-size:12px; }

.save #save-tip dd a { float:left; margin-right:20px; color:#f5f5f5; }
.save #save-tip dd a:hover { text-decoration:underline; }
.save #save-tip dd a span { float:left; margin-right:4px; padding:2px 0; background-image:url('../images/icons-16.png'); background-repeat:no-repeat; width:16px; height:16px; }
.save #save-tip dd a#gmail span { background-position:0 50%; }
.save #save-tip dd a#yahoo span { background-position:-16px 50%; }
.save #save-tip dd a#hotmail span { background-position:-32px 50%; }
.save #save-tip dd a#twitter span {background-position:-48px 50%; }
.save #save-tip dd a#facebook span { background-position:-64px 50%; }
.save #save-tip dd a#buzz span { background-position:-80px 50%; }

.save #save-tip dd a#upload, .save #save-tip dd a#save_button {
    display:inline-block;
    height:20px;
    line-height: 21px;
    margin-right:10px;
    padding:2px 7px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8F8F8), to(#D2D2D2));
    -webkit-box-shadow: #303030 0 1px 2px;
    color:#000;
    text-shadow: 0 1px 0 #f5f5f5;
    -webkit-border-radius:6px;
}

.save #save-tip dd a#save_button { 
    float:none;
}/*v2.0*/
.save #save-tip dd a#save_button span {
    float:left;
    padding:0; margin-right:5px; width:20px; height:20px;
    background:url('../images/icons.png') no-repeat -160px 0;
}/*v2.0*/
.save #save-tip dd a#upload:hover, .save #save-tip dd a#save_button:hover { text-decoration:none!important; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e5e5e5)); }
.save #save-tip dd a#upload:active, .save #save-tip dd a#save_button:active { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5e5e5), to(#ddd)); }
.save #save-tip dd a#upload span{ float:left; margin-right:5px; width:20px; height:20px; padding:0; background:url('../images/icons.png') no-repeat -280px 0; }

.save #save-tip dd a#upload.disable_upload {
    /*display:none;*/
    color:#999;
}
.save #save-tip dd a#upload.disable_upload span {
    background:url('../images/icons.png') no-repeat -280px -20px;
}

#loader { padding-left:22px; background:url('../images/loader.gif') no-repeat 0 4px; }
#loader a, #error a{ float:none !important;margin-left: 10px;background-color:#606060; color:#eee !important; padding:1px 5px; text-shadow:none !important; border-radius:5px; }
#loader a:hover, #error a:hover{text-decoration:none!important;background-color:#333;color:#fff;}
#error a{margin: 0!important;}
#error p{margin-bottom: 5px;}

#share+dd #email-link { padding-bottom:12px; }
#share-button { padding-bottom:10px; }
#share-button:after, #email-link:after { content:'.'; display:block; height:0; visibility:hidden; clear:both; }
#save-tip #share-button a { float:left; line-height:22px; background-position:6px 2px; }
a.visited { color:#bbb !important; }

#share-link { height:22px; padding-bottom:26px; line-height:22px; }
#share-link p { padding-bottom:5px; }
#share-link  input {
    width:300px;
    height:20px;
    padding:2px 5px;
    border:1px solid #999;
    border-color: #c9c9c9 #b5b5b5 #d8d8d8;
    -webkit-box-shadow: #717171 0 -1px 0;
    background-color: #f4f4f4;
    font-weight:normal;
    font-size:12px;
}
#share-link span { 
    display:none; margin-left:-80px;
    color:#57D4FF; font-size:12px;
    line-height: 26px;
}

#image_loader { 
    display:none;
    padding-left:26px; background:url(../images/loader.gif) no-repeat 0 50%;
    color:#f5f5f5; line-height:32px;
    text-shadow: 0px -1px 0px #404040;
}

/* Drag and Resize
----------------------------------*/
.ui-resizable { position: relative !important;}
.ui-resizable-handle { 
    position: absolute !important; z-index: 999 !important; display: block !important;
    background:url(../images/spot.png) no-repeat center center !important;
    font-size: 0.1px !important;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none !important; }
.ui-resizable-n { cursor: n-resize !important; height: 9px !important; width: 100% !important; top: -5px !important; left: 0 !important; }
.ui-resizable-s { cursor: s-resize !important; height: 9px !important; width: 100% !important; bottom: -5px !important; left: 0 !important; }
.ui-resizable-e { cursor: e-resize !important; width: 9px !important; right: -5px !important; top: 0 !important; height: 100% !important; }
.ui-resizable-w { cursor: w-resize !important; width: 9px !important; left: -5px !important; top: 0 !important; height: 100% !important; }
.ui-resizable-se { cursor: se-resize !important; width: 9px !important; height: 9px !important; right: -5px !important; bottom: -5px !important; }
.ui-resizable-sw { cursor: sw-resize !important; width: 9px !important; height: 9px !important; left: -5px !important; bottom: -5px !important; }
.ui-resizable-nw { cursor: nw-resize !important; width: 9px !important; height: 9px !important; left: -5px !important; top: -5px !important; }
.ui-resizable-ne { cursor: ne-resize !important; width: 9px !important; height: 9px !important; right: -5px !important; top: -5px !important; }