/* CSS */


/* ************************* */
/* lets set some global fun! */
/* ************************* */

* {
	/*text-rendering: optimizelegibility;
	box-sizing: border-box;
	-moz-box-sizing: border-box;*/
}



.clickarea {
position: absolute;
top: 0px;
left: 0;
display: block;
width: 100%;
height: 100%;

}




/* =Clearfix (all browsers)
--------------------------------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */ 
* html .clearfix {height: 1%;}
/* IE7 */
*:first-child+html .clearfix {min-height: 1px;}




/* **************************************************  */
/* **************************************************  */
/* MAIN */

body .contentWrapper {
position: absolute;

xborder: 1px solid red;

left: 0px;
top: 0px;
bottom: 0px;
right: 0px;

-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
padding-bottom: 150px;

overflow: auto;
}

body.stashOpen .contentWrapper,
body.muroOpen .contentWrapper {

overflow: auto;

left: 0;
xtop: 46px;
bottom: 0;
right: 326px;

-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
}


.whatsup section {
-moz-box-sizing: border-box;
box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    width: 100%;

}

.whatsup section form { 

position: relative;


 }



form .avatar {
position: absolute;
margin: 1px 0 0 0;
left: 4px;
top: 20px !important;
}

#reply-submit-2013 form.previewMode .avatar {
xleft: 25px;
}

.commentWrapper {
 -moz-box-sizing: border-box;
 box-sizing:border-box;
    display: table;
    padding-right: 80px;
    position: relative;
    width: 100%;
}

.commentWrapper .cctextarea.expanded:before {	
background: url("../img/arrowleft.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    clear: left;
    content: "";
    display: inline-block;
    height: 11px;
    left: -6px;
    position: absolute;
    top: 19px;
    width: 11px;
    z-index: 200;}


.commentNameWrapper {
color: #5E7570;

}

.cctextarea { /* default (closed) text area */

xbackground: #f3f8f2;
xxbackground: rgba(255,255,255,.75);  /* note- this means it plays nicely in a stash bkgrd :( */

background: #F7F7F7;

xborder: 1px solid #b7c4b2;
border: 1px solid #B5BFB5;

margin: 0 0px 10px 0px;
display: table-cell;
vertical-align: middle;


padding: 0px;
border-radius: 4px;
height: 35px;

box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.35);

-webkit-transition: all .15s cubic-bezier(.25,1,.25,1);
-moz-transition: all .15s cubic-bezier(.25,1,.25,1);
-o-transition: all .15s cubic-bezier(.25,1,.25,1);
-ms-transition: all .15s cubic-bezier(.25,1,.25,1);
}


.cctextarea:hover {background: #FFF;box-shadow: none;
}


.cctextarea i.l {
position: absolute;
top: 11px;
left: -6px;
background: url(../img/arrowleft.png) 0 0 no-repeat;
display: block;
width: 17px;
height: 17px;
content: "";

}

.cctextarea.expanded { 
/*height: 50px;*/
xoverflow: hidden;
background: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,0.5);
xborder: 1px solid #555;
border: 1px solid #A8A4A4;
width: 100%;
  }

.cctextarea.expanded i.l {
background: url(../img/comment-arrow-form-2c.png) 0 0 no-repeat;

}

.cclabel { color: #768e81;  }
.ccusername { xfont-weight: bold; }

.ccPreviewLabel { color: rgba(0,0,0,0.3); font-size: 11px; }


/* **************************************************  */
/* **************************************************  */
/* comment text input */


.commentTextWrapper {
height: 30px;

xoverflow: hidden ;
position: relative;
border-radius: 6px;

}

.cctextarea.expanded .commentTextWrapper {
padding: 8px 0px 12px 0px;
overflow: hidden;
}


.commentText {
background: transparent;
border: none;

padding: 0px 8px;
height: 100%;
overflow-y: hidden !important;
border-radius: 6px;
/*opacity: 0;*/
margin: 0;
padding: 7px;
}

.expanded .commentText  {
opacity: 1;
overflow: auto;
padding: 0 7px;
height: 30px;
}

.commentArea {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: medium none !important;
    box-shadow: none !important;
    display: block;
    font-family: "Verdana",verdana,sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0 !important;
    resize: none !important;
    width: 100%;
	height: 0 !important;
}

.expanded .commentArea {  xheight: 100%; }

#reply-submit-2013 .expanded .commentArea {  }


#comment-submit-2013 .commentArea {
min-height: 37px;
}


/* **************************************************  */
/* **************************************************  */
/* text editor */



#wysihtml5-toolbar {
position: absolute;
top: 0;
width: 100%;
padding-right: 360px !important;
overflow: hidden;
}


.resizer {
position: absolute;
top: 0;
left: 0;
background: transparent;
display: block;
width: 100%;
height: 50px;
padding: 5px 5px;
}

.resizer span {
display: block;
height: 100%;
width: 100%;
background: white;
}

iframe {

-webkit-transition: height .15s cubic-bezier(.25,1,.25,1);
-moz-transition: height .15s cubic-bezier(.25,1,.25,1);
-o-transition: height .15s cubic-bezier(.25,1,.25,1);
-ms-transition: height .15s cubic-bezier(.25,1,.25,1);

}

iframe.expanded { height: 158px !important; }



/* **************************************************  */
/* **************************************************  */
/* addition buttons (shelf area) */


.shelfWrapper {

xbackground: #f4f6f5;
background: transparent;
border-top: 1px dotted rgba(0,0,0,0.2);
border-radius: 0 0 6px 6px;
height:20px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);

padding: 4px 5px 4px 0;

margin: 0 8px;
display: block;
position: relative;
bottom: 0;
left: 0;
xwidth: 100%;
width: auto;
xoverflow: hidden;

font-size: 10px;
}

.shelfWrapper ul {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;

}

.shelfWrapper ul li {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
position: relative;
}

.shelfWrapper ul li a {
display: block;
border: 1px solid transparent;
xoverflow: hidden !important;
xtext-indent: -999px;
xwidth: 30px;
height: 15px;
border-radius: 4px;
margin-right: 1px;
padding: 5px 4px 0 20px;
color: #555 !important;
}

.shelfWrapper ul li a:hover {text-decoration: none !important;}

.shelfWrapper ul li a span { 
overflow: hidden; 
white-space: nowrap ;
text-overflow: ellipsis;
margin-left: 2px;
}

.shelfWrapper ul li a:hover {
xborder: 1px solid #d3d3d3;
xbox-shadow: inset 0 1px 0 rgba(255,255,255,1);
xtext-decoration: underline;
xbackground-color: #f5f5f5;
background-color: rgba(0,0,0,.05);
}

.shelfWrapper ul li a:active {
xborder: 1px solid #b3c0c4;
xbox-shadow: inset 0 1px 0 rgba(255,255,255,.75);
xbox-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.75);
background-color: rgba(0,0,0,.1);
}

/*

.shelfWrapper .showMedia { background: url(../img/writer-icon.png) 4px center no-repeat; }

.shelfWrapper .showDrawPlz { background: url(../img/muro-icon.png) 6px center no-repeat; }

*/

.shelfWrapper .showMedia, .shelfWrapper .hideMedia { 
padding: 0 !important; 
position: relative;}

.addMediaBtn, .hideMediaBtn {
padding: 3px 4px 0 20px;
display: block;
}

.shelfWrapper .showMedia .addMediaBtn:before
{
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	left: 0;
	z-index: 2;
	background: url(../img/plus.png) 4px 2px no-repeat;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.shelfWrapper .showMedia .hideMediaBtn:before
{

	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	top: -4px;
	left: -3px;
	z-index: 2;
	background: url(../img/plus.png) 6px 7px no-repeat;
		
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}



.shelfWrapper .showDrawPlz { 
 padding: 0px;
  }



.showDrawPlz .addMuroBtn,
.showDrawPlz .hideMuroBtn { display: block; padding: 3px 4px 5px 20px; }

.shelfWrapper .showDrawPlz .addMuroBtn:before
{
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	left: 4px;
	z-index: 2;
	background: url(../img/brush.png) 0 3px no-repeat;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	
}


.showDrawPlz .hideMuroBtn {margin-left: -6px; }

.shelfWrapper .showDrawPlz .hideMuroBtn:before
{

	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	left: 0px;
	z-index: 2;
	background: url(../img/plus.png) 1px 8px no-repeat;
		
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}




.writer-dotdotdot {
display: block;
background: url(../img/dotdotdot2.png) center 5px no-repeat rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.1) !important;

padding: 0 !important;
height: 15px !important;
width: 30px !important;
cursor: pointer;
display: block;
position: absolute;
top: -30px;
text-indent: -999px;
overflow: hidden;
border-radius: 3px !important;
opacity: .74;
}

.writer-dotdotdot:hover {
opacity: 1;
box-shadow: none !important;
}

.writer-dotdotdot.quoteAdded {display: none;}



.shelfWrapper li:first-child { display: none; } /* turn off the quote for normal comments */

#reply-submit-2013 .shelfWrapper li:first-child { display: block; } /* turn on for replies */


/* **************************************************  */
/* **************************************************  */
/* buttons */

.scripted { 

    position: absolute;
    right: 0;
    width: 78px; 
	bottom: 0;
}

.scripted a { /*display: inline-block;*/  }

.scripted a.preview span,
.scripted a.edit span,
.scripted a .post { 
display: block;
font: bold 14px Trebuchet, Trebuchet MS !important;
color: #515c5a;
text-shadow: 0 1px 0 rgba(255,255,255,0.65);
height: 100%;
width: 100%;
padding: 12px 20px !important;
}




/* **************************************************  */
/* **************************************************  */
/* stash bars */

.stashWrapper {
width: 100%;
height: 100%;
border: 1px solid red;
display: block;
position: absolute;
top: 0;
left: 0;
}

.topStrip {
height: 46px;
width: 100%;
xbackground: #f5f5f5;
background: rgba(245,245,245,1);
display: block;
position: fixed;
top: -46px;
box-shadow: 0 1px 5px rgba(0,0,0,0.35);

-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
}

body.stashOpen .topStrip {
top: 0px;
}

.rightStrip {
height: 100%;
width: 325px;
background: silver;
display: block;
position: fixed;
right: -325px;
top: 0;

xbackground: #f5f5f5;
background: rgba(245,245,245,1);

-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;

padding: 50px 10px 35px 10px;

}

.deviantART .topStrip,
.deviantART .rightStrip {
background: #f6f6f0  !important;
}


body.stashOpen .rightStrip.commentwriter-sidebar {
right:  0px;
}

#wysihtml5-toolbar {
height: 100%;
vertical-align: top;
padding: 4px 0;
}

#wysihtml5-toolbar a {
display: inline-block;
height: 100%;
border: 1px solid red;
vertical-align: top;
background-image: url(../img/writerbar-alpha.png);
background-repeat: no-repeat;

  height: 26px;
    line-height: 26px;
    width: 28px;
    xbackground-color:#f5f5f5;
    border:1px solid #f5f5f5;
    
    text-indent: -1000px;
    margin: 7px 0 0 2px;
    
    cursor: pointer;
}

#wysihtml5-toolbar i { 
vertical-align: top;
background-image: url(../img/writerbar-alpha.png);
background-repeat: no-repeat;
background-position: -520px 0px;
display: inline-block;
  height: 26px;
  width: 2px;
  margin: 7px 0 0 2px;
  
  }

#wysihtml5-toolbar a.undo { background-position: 8px 4px; }

#wysihtml5-toolbar a.redo { background-position: -32px 4px; }

#wysihtml5-toolbar a.bold { background-position: -72px 4px; }

#wysihtml5-toolbar a.italic { background-position: -112px 4px; }

#wysihtml5-toolbar a.underline { background-position: -152px 4px; }

#wysihtml5-toolbar a.ulist { background-position: -234px 4px; }

#wysihtml5-toolbar a.olist { background-position: -274px 4px; }

#wysihtml5-toolbar a.quote { background-position: -314px 4px; }

#wysihtml5-toolbar a.alignLeft { background-position: -352px 4px; }

#wysihtml5-toolbar a.alignCenter { background-position: -392px 4px; }

#wysihtml5-toolbar a.alignRight { background-position: -432px 4px; }

#wysihtml5-toolbar a.link { 
background-position: -752px 4px; 
text-indent: 0; 
padding-left: 28px;
width: auto; 
color: #000;
}

#wysihtml5-toolbar a.help {
display: none !important;

background: #ccc;
text-indent: 0;
border-radius: 40px;
height: 18px;
width: 18px;
text-align: center;
font-size: 10px;
color: white;
border: none !important;
padding-top: 3px !important;
line-height: normal;
font-weight: normal;
margin-top: 10px;
position: absolute;
right: 340px;
top: 4px;
}

#wysihtml5-toolbar a.help:hover {
border-radius: 40px;
box-shadow: none;
border: none !important;
background: #888888;
}



#wysihtml5-toolbar a.link b {
height: 100%;
display: block;
float: right;
width: 8px;
background-image: url(../img/writerbar-alpha.png);
background-repeat: no-repeat;
background-position: -480px 5px;
margin: 0 7px;
}

#wysihtml5-toolbar a:hover {
 box-shadow: inset 0 1px 0 white;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
}

#wysihtml5-toolbar a:active {
	background-color: #e6e6e6;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    border: 1px solid #d3d3d3;
    border-radius: 6px;

}



.stashLogo {
height: 100%;
width: 200px;
display: inline-block;
background: url(../img/stash-logo.png) center center no-repeat;
margin-left: 10px;
}

.commentwriter-actions,
.muro-actions {
position: absolute;
display: none;
right: 0;
z-index: 100;
width: 325px;
text-align: center;
margin-top: 2px;
}

body.stashOpen .commentwriter-actions {display: block; }

.commentwriter-actions a span,
.muro-actions a span {
padding: 6px 8px;
font: 11px Verdana,sans-serif;
line-height: 1em;
color: rgb(59, 90, 74);
font-size: 11px;
}

.commentwriter-actions a em,
.muro-actions a em { 
font-style: normal; 

 }


 
 
/* **************************************************  */
/* **************************************************  */
/* Muro bars */


 body.muroOpen .topStrip {
top: 0px;
background: url(../img/muro-topstrip.png) 0 0 no-repeat rgba(245,245,245,1);
}

body.muroOpen #wysihtml5-toolbar { display: none; }


body.muroOpen .commentwriter-sidebar { }


body.muroOpen .rightStrip.muro-sidebar {
right:  0px;
z-index: 1000;
}

.muro-actions { z-index: 1001; }


body.muroOpen .rightStrip.muro-sidebar .container {
display: block;
height: 100%;
width: 100%;
position: relative;
padding: 0 0 0 0;
}

body.muroOpen .rightStrip.muro-sidebar .container span {
display: block;
width: 100%;
background: url(../img/muro-rightstrip-mid.png) 0 0  transparent;
height: 100%;
}

body.muroOpen .rightStrip.muro-sidebar .container i {
position: absolute;
bottom: 95px;
display: block;
background: rgba(245,245,245,1);
height: 70px;
}

.bottomStrip { 
display: block;
background: url(../img/muro-bottomstripWrapper.png) left bottom repeat-x rgba(245,245,245,1); 
height: 130px;
position: fixed;
bottom: -130px;
left: 0;
width: 100%;
z-index: 1001;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
}
 
body.muroOpen .bottomStrip {
bottom: 0;
}

.bottomStrip .container {
width: 100%;
height: 100%;
background: url(../img/muro-bottomstrip.png) center bottom no-repeat;

}

 body.muroOpen .muro-actions { display: block; }
 

 
 body.stashOpen .rightStrip.muro-sidebar {
 opacity: 0;
 right: 0;
 }
 
 
 body.stashOpen.muroOpen .rightStrip.muro-sidebar {
 
 opacity: 1;
 
 }
 
.hideMedia {  border: 1px solid red !important; }
 
 .muroOpen .commentArea { display: none; }

.canvas {
background: rgba(240,240,240,1);
width: 100%;
height: 100%;
display: none;
text-align: center;
position: relative;
z-index: 10;
vertical-align: middle;
}

.canvas span {
display: table-cell;
vertical-align: middle;
font-size: 24px;
font-family: "Trebuchet MS";
color: rgba(0,0,0,0.15);
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

  .muroOpen .cctextarea.expanded {
height: 320px;
}
  .muroOpen .canvas {
  
  display: table;
  }

/* **************************************************  */
/* **************************************************  */
/* control panel */


.controlPanelBefore {

background: url(../img/cog.png) center center no-repeat rgba(255,255,255,1);
width: 50px; height: 40px;


border-radius: 6px 6px 0 0;
display: block;
box-shadow: 1px 1px 5px rgba(0,0,0,0.35);

}

#controlPanel {
position: fixed;
bottom: -140px;
left: 50px;
width: 230px;
height: 180px;
text-align: center;

padding: 0 0 0 ;

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
z-index: 1000;

}

#controlPanel:hover {
bottom: 0px;
}


#controlPanel.stuck {
bottom: 0px;
}


#controlPanel.stuck  .tape {
opacity: 1;
-webkit-transform: rotate(-10deg);
}

.tape {
opacity: 0;
display: block;
position: absolute;
top: -20px;
left: -40px;
height: 60px;
width: 170px;
background: url(../img/sticky-tape.png) center center no-repeat;
-webkit-transform: rotate(0deg);

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
cursor: pointer;
}

.tape:hover {
background: url(../img/sticky-tape-remove.png) center center no-repeat;

}

#controlPanel .stickMe {
display: block;
height: 20px;
text-align: center;
position: absolute;
bottom: 10px;
width: 100px;
background: rgba(0,255,255,.35);
margin-left: -50px;
left: 50%;
-webkit-transform: rotate(-2deg);
}

#controlPanel .stickMe:hover {
text-decoration:  underline;
}

#controlPanel.stuck .stickMe {
display: none;

}

#controlPanel ul {
display: block;
width: 100%;
height: 100%;
padding: 10px 20px;
background: url(../img/lined_paper.png) 0 0 rgba(255,255,255,0.74);
box-shadow: 1px 2px 5px rgba(0,0,0,0.35);
border: 1px solid white;
}



#controlPanel {
font-family: 'Special Elite', cursive;
font-size: 14px;
}

#controlPanel ul li {
display: block;
margin: 10px 0;

font-size: 12px;
}

#controlPanel ul li a {
font-size: 14px;
margin: 0 0px 0 5px;
}

#controlPanel ul li a:hover {
text-decoration:  underline;
}

#controlPanel ul li a.on {
background: rgba(255,255,0,.2);
color: #9d001e;
text-decoration: underline;

}








/* **************************************************  */
/* **************************************************  */
/* reply */


#reply-submit-2013 {
xmargin-left: -100px;
}

#reply-submit-2013 form { 
 display: block;
position: absolute;
padding-left: 70px;
height: 0px;
overflow: hidden;
right: 0;
width: 630px;

 -webkit-transition: height .3s ease-in-out;
 -moz-transition: height .3s ease-in-out;
 -o-transition: height .3s ease-in-out;
 -ms-transition: height .3s ease-in-out;
 

  -webkit-transition: width .15s ease-in-out;
 -moz-transition: width .15s ease-in-out;
 -o-transition: width .15s ease-in-out;
 -ms-transition: width .15s ease-in-out;
 }
 
 
 #reply-submit-2013 form.open {
padding-top: 2px;
 height: auto;
padding-bottom: 150px;
 }
 
 
 #reply-submit-2013 form.previewMode {
 width: 630px;

 }


#reply-submit-2013 form .avatar,
#reply-submit-2013 form .l { display: block; }

#reply-submit-2013 form.previewMode .avatar,
#reply-submit-2013 form.previewMode .l { display: block; }



#reply-textarea { overflow-y: auto; }

.ch, 
.ch-ctrl {
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
position: relative;
}

.ccomment {
margin-bottom: 16px;
position: relative;
min-height: 90px;
}

.ccomment .ch-ctrl {
background: none;
border: 0;
}

.ccomment i.l {
background: url(http://origin-st.deviantart.net/minish/deviation/artist-comment-l.gif?2);
}

.ccomment i.l {
position: absolute;
z-index: 2;
width: 11px;
height: 12px;
left: 60px;
top: 19px;
overflow: hidden;
}

.cc-avatar {
float: left;
margin: 0px 17px 3px 3px;
position: relative;
z-index: 3;
}

.ctext {
overflow: hidden;
}


.ccomment .ch-ctrl .ch-ctrl {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 1px solid #B5BFB5;
background: #DDE5D8;
}

.ccomment .cc-in {
padding: 8px;
min-height: 90px;
overflow: hidden;
border: 1px solid #C9D1C8;

}



.cc-meta {
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
}

.cc-name, .cc-name a {
color: #304030;
}

.cc-name {
font: 13.5pt Trebuchet MS,sans-serif;
font-weight: bold;
letter-spacing: -1px;
}

.cc-time {
margin-left: 8px;
font-size: 8.25pt;
line-height: 1em;
white-space: nowrap;
}

.cc-time, .cc-time a, .cc-userdetails {
color: #778584;
}

.cc-userdetails {
font-size: 8.25pt;
line-height: 1em;
white-space: nowrap;
margin-left: -1ex;
}

.ccomment div.text {
word-wrap: break-word;
}


.ccomment a.reply {
left: 3px;
bottom: 0 !important;
}

.ccomment a.reply {
position: absolute;
bottom: 6px;
left: 4px;
width: 44px;
padding: 0 0 0 5px;
}

body a.gmbutton2, .gmbutton2, .gminlet {
height: 27px;
text-align: center;
padding: 0 7px 0 12px;
color: #4C645E;
display: block;
text-decoration: none !important;
font-size: 9pt;
font-family: Verdana, sans-serif;
letter-spacing: 0;
line-height: 27px;
white-space: nowrap;
zoom: 1;
position: relative;
}

.gmbutton2, .gmbutton2 b {
background-image: url(http://origin-st.deviantart.net/minish/messages/gmbutton2.gif);
}

.gmbutton2 b, .gminlet b {
position: absolute;
top: 0;
right: -5px;
height: 27px;
width: 6px;
background-position: 100% 0;
}

.cx {
display: block !important;
position: absolute;
top: 0px;
right: 0;
z-index: 100;
cursor: pointer;
color: #337287;
text-indent: -999px;
width: 20px;
height: 20px;
overflow: hidden;
background: url(http://origin-st.deviantart.net/ui/2011/modals/assets/modal-close.png) 0 0 no-repeat;
}


.cx:hover {background-position:0 -20px;}

.u { color: #3B5A4A; }

.u:hover,
.cx:hover {
text-decoration: underline;

}

.quoteFaked {
display: block;
margin: 1em 0 1em 1em;
padding: 0.6em;
border-left: 5px solid rgba(0,0,0,0.15);
position: relative;

color: rgba(0,0,0,0.65);
font-style: italic;
}

.quoteFaked:before {
content: "";
position: absolute;
display: block;
height: 14px;
width: 14px;
background: url(../img/quote-inline.png) 0 0 no-repeat transparent;

top: 3px;
left: -17px;
}


/* preview mode */


.previewMode .cctextarea { 
border: 1px solid #B5BFB5;
background: #DDE5D8;
box-shadow: none;
position: relative;
xoverflow: hidden;
}

.cctextarea .previewWarning { display: none; }

.previewMode .cctextarea .previewWarning {

display: block;
position: absolute;

top: 7px;
right: 7px;
border-radius: 4px;

background: rgba(255,255,255,0.35);
box-shadow: 0 1px 0px rgba(0,0,0,0.1);
font-size: 11px;
font-weight: bold;
color: #93aa99;
padding: 4px 24px 4px 4px;

cursor: pointer;
}

.previewMode .cctextarea .previewWarning i {
display: block;
position: absolute;
right: 0;
top: 0;
background: url(../img/white-x.png) center center no-repeat rgba(145,41,37,.5);
height: 100%;
width: 19px;
border-radius: 0 4px 4px 0;
}

.previewMode .cctextarea .previewWarning:hover i {
background: url(../img/white-x.png) center center no-repeat rgba(145,41,37,1);
}

.previewMode .cctextarea .previewWarning:hover {
background: rgba(255,255,255,0.75);
color: #597465;
}


.previewMode .cctextarea i.l {
background: url(http://origin-st.deviantart.net/minish/deviation/artist-comment-l.gif?2) 0 0 no-repeat;
left: -12px;
top: 20px;
}

#comment-submit-2013 form.previewMode .cctextarea i.l {
left: -12px;
top: 20px;
border: 1px solid red;
}

#reply-submit-2013 form.previewMode .cctextarea i.l {
left: -12px;
top: 20px;
}



.previewMode .shelfWrapper {
bottom: -40px;
}


.cc-signature {
color: #879594;
font-size: 8pt;
float: left;

width: 100%;

display: none;
margin-top: 10px;

}

.cc-signature sub {
padding-top: 4px;
border-top: 1px solid #A7B5B4;
display: inline-block;
width: auto;
}

.previewMode .cc-signature {
white-space: nowrap;
display: block;

}


.previewTitle {  display: none;}

.previewMode .previewTitle { margin-left: 7px; display: block;}


/* quick tooltip */

.quicktip {
display: block;
position: absolute;
z-index: 300;
opacity: 0;

top: -54px;
left: 0;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
border-radius: 4px;

-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
}

.writer-dotdotdot:hover + .quicktip {
opacity: 1;
top: -64px;
}

.quicktip .message {
display: block;
position: relative;
width: 100%;
padding: 4px 7px;
color: #fff;
background: #000;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
font: 11px/1.5 verdana;
border: none;
text-decoration: none;

margin: 0;
overflow: visible !important;
border-radius: 4px;
}

.quicktip:after {
     bottom: -7px;
    left: 7px;
    content: "";
    position: absolute;
    display: block;
    
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 7px 7px 0 7px;
	border-color: #000000 transparent transparent transparent;    
	color: #000;
}



#comments-thread-settings { margin-bottom: 10px !important; margin-top: 30px !important;}


/* select */

select {
-webkit-appearance: none;
background: url(../img/select-2.png) no-repeat right -23px;
border: 1px solid #b8b8b8;
box-shadow: 0 1px 0 rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.4);
padding: 5px 29px 5px 10px;
cursor: pointer;
}

select:hover {
background: url(../img/select-bg-white.png) no-repeat right 0px;
}

input, select {
xvertical-align: middle;
}

/* ********************************************************************** */
/* ********************************************************************** */
/* ********************************************************************** */


/* ********************************************************************** */
/* writer sidebar */
/* ********************************************************************** */

.commentwriter-sidebar h3 {
font-size: 15px;
font-weight: normal;
letter-spacing: 0;
margin: 0 0 10px;
float: none;
font-family: "Trebuchet MS";
}


.types-container {
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;

padding-top: 25px;
display: block;
position: relative;

height: 100%;
}


.types-overview {
position: absolute;

background: #fafafa;
border-bottom: 1px solid #ccc;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
padding-top: 24px;
z-index: 110;

display: block;
top: 0;
left: 0;
width: 100%;
}

.types-overview ul {
padding: 5px 0 7px 0;
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 12px;
display: block;
}

.types-overview li.active {
background: url(http://origin-st.deviantart.net/minish/submit/writer-sidebartype-notch-uplift.gif?1) no-repeat center -16px;
height: 24px;
color: #444;
z-index: 110;
}

.types-overview li {
display: block;
cursor: pointer;
color: #1878aa;
padding: 0 5px;
float: left;
font-size: 11px;
}

.types-main {
xbackground: #f5f5f5;
overflow-y: hidden;
overflow-x: hidden;
position: relative;
height: 100%;
border-radius: 0px 0px 6px 6px;
padding: 0px 0px 0px 0px;
}



.conversation h3 {
padding-left: 10px;
padding-top: 15px;
}

.stash h3 {
xpadding-left: 20px;
padding-top: 15px;
}

.conversation h3 span,
.stash h3 span {
font-size: 13px;
vertical-align: top;
margin-top: 3px;
display: inline-block;
}

.conversation h3 span b,
.stash h3 span b {
font-weight: normal;
color: rgba(0,0,0,.35);
}

.conversation h3 a {
margin-right: 5px;
display: inline-block;
vertical-align: top;
}

div.stream.stash-stream div.tt-a, 
div.stream.skins-stream div.tt-a {
display: inline-block;
width: 190px !important;
height: 220px;
}

div.stream div.tt-a, 
div.rs-customicon {
display: inline-block;
vertical-align: top;
}

div.stream div.tt-a span.tt-w, 
div.stream div.tt-a div.tt-w, 
div.rs-customicon div.rs-customicon-cont {
display: table-cell;
display: inline-block;
vertical-align: top;
margin: 8px 0;
xwidth: 205px;
width: 150px;
text-align: center;
}

.stream { padding: 0 10px;}


.thumb {
display: block;
position: relative;
z-index: 2;
}

.thumb img {
box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.t {
display: block;
color: #6a6a6a;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
}

.premium .empty-message {display: block; }

.writer-sidebar-main-stash .empty-message { display: none !important; }

.empty-message {
display: none;
xcolor: #aaa;
color: rgba(0,0,0,0.45);

text-align: left;
padding: 5px 15px 5px 15px;
xpadding: 5px 35px 5px 15px;
xborder-radius: 6px;
xbackground: rgba(255,255,255,0.75);
xfont-family: "trebuchet ms";
font-size: 12px;
position: relative;
line-height: 17px;
xborder: 1px solid rgba(0,0,0,0.1);

margin-top: 10px;
}

.empty-message i {
position: absolute;
background: url(../img/modal-close.png) 0 0 no-repeat;
width: 20px; height: 20px;
display: none !important;
top: 5px;
right: 5px;
cursor: pointer;
opacity: .5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
}

.empty-message:hover i {
opacity: .75;
}

.empty-message i:hover {
background: url(../img/modal-close.png) 0 -20px no-repeat;
opacity: 1;
}

.stash ul {
display: block;
margin: 0; padding: 0;
text-align: justify;
margin-top: -10px;
margin-left: 5px;
margin-right: -5px;
}


.stash ul li {
display: inline-block;
width: 130px;
height: 150px;
margin: 0 0px;
text-align: center;
vertical-align: top;
}

.stash ul li a {
padding-bottom: 20px;
display: block;
position: relative;
height: 100%;
}

.stash ul li a img {
width: 105px;
}

.stash ul li a em {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
display: block;
height: 15px;
}

.addToStash .thumb {
background: url(../img/uploadToStash.png) center center no-repeat transparent;
box-shadow: none;
width: 100%;
height: 100%;
display: block;
margin-left:-5px;
}

.thumb span {
display: block;
position: absolute;
top: 50%;
margin-top: -40px;
left: 50%;
margin-left: -59px;
width: 106px;
height: 85px;
}

.thumb span img {
width: 100%; height: 100%;
}


tt {
    background-image: url('http://origin-st.deviantart.net/minish/main/stackoverflow-transparent.png');
    
    position: absolute;
width: 85px;
height: 85px;

z-index: 1;
    
    display: block;

    
}
tt.tt1 {
	left: -13px;
    top: -15px;
    background-position: left top;
}
tt.tt2 {
	top: -15px;
    right: -13px;
     background-position: right top;
}

tt.tt3 {
	bottom: -15px;
    right: -13px;
     background-position: right bottom;
}
tt.tt4 {
    bottom: -13px;
    left: -13px;
     background-position: left bottom;
}

.writer-sidebar-main-conversation,
.writer-sidebar-main-stash,
.writer-sidebar-main-deviantart,
.writer-sidebar-main-emotes { 
height: 100%;
}

.scroll-container {
height: 100%;
display: block; }

.writer-sidebar-main-deviantart .scroll-container,
.writer-sidebar-main-emotes .scroll-container  {
padding-top: 55px;
}


.inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
display: block;
}

.dA {  
background: url(../img/dA-blanker.png) center top no-repeat;
xborder: 1px solid red;
min-height: 90%;
display: block;
}

.emotes {
background: url(../img/emotes-blanker.png) center top no-repeat;
xborder: 1px solid red;
height: 900px;
display: block;
text-align: center;
  }
 
 .emotesSearch {
 height: 55px;
 background: url(../img/emotes-search.png) center center no-repeat;
 position: absolute;
 top: 0;
 width: 100%;
 }
 
 .daSearch {
 height: 55px;
 background: url(../img/dA-search.png) center center no-repeat;
 position: absolute;
 top: 0;
 width: 100%;
 }
  

.writer-sidebar-main-deviantart .empty-message,
.writer-sidebar-main-emotes .empty-message
 { display: none; }



.panelBlanker {
height: 100%;
width: 100%;

background: rgba(245,245,245,.85);
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 101;
}

.premium .panelBlanker { display: none; }

.panelBlanker span {
display: block;
margin: 25px auto 0 auto;
width: 250px;
background: #e4e4e4; /* rgba(0,0,0,0.07) */
text-align: center;
padding: 10px 15px;
border-radius: 6px;
line-height: 18px;
font-size: 12px;
}

.writer-sidebar-main-conversation .scroll-container {xdisplay: none;}
.premium .writer-sidebar-main-conversation .scroll-container {display: block;}


.writer-sidebar-main-deviantart .scroll-container,
.writer-sidebar-main-deviantart .daSearch {xdisplay: none;}
.premium .writer-sidebar-main-deviantart .scroll-container,
.premium .writer-sidebar-main-deviantart .daSearch {display: block;}



/* **************************************************  */
/* **************************************************  */
/* Muro image */

.muroImage {
display: block;
margin-top: 10px;
}


.muroImage.closed {
display: block;
padding: 9px 7px;
xborder: 4px dashed #B5BFB5;

xborder: 3px dashed #b3c4b4;
border: 3px dashed rgba(0,0,0, .3);


border-radius: 6px;
cursor: pointer;
width: 200px;
margin: 15px 0 0px 0;
background: transparent;
}

.muroImage.closed:hover {
background:  rgba(255,255,255,0.2);
}




.muroImage.closed span {
display: block;
xcolor: #839584;
color: rgba(33,33,33, .65);

font: 17px "Trebuchet MS";
font-weight: bold;
position: relative;
width: 140px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
letter-spacing: -1px;
margin: 0 auto;
text-align: center;
padding-left: 20px;
}

.muroImage.closed:hover span {
color: #337287;

}

.muroImage span i {
background: url(../img/monalisa2-mono.png) left top no-repeat !important;
position: absolute;
left: 10px;
top: 0px;
display: block;
height: 20px;
width: 20px;
}

.muroImage:hover span i {
background: url(../img/monalisa2.png) left top no-repeat !important;
}

.muroImage.closed img,
.muroImage span {
display: none;
}

.muroImage img {
display: block;

}

.toggleImages {

display: block;
position: absolute;
right: 0;
top: 2px;
background: url(http://origin-st.deviantart.net/minish/messages/gmbutton2.gif) -1px -1px no-repeat;

border: 1px solid #b8b8b8;
box-shadow: 0 1px 0 rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.4);
border-radius: 6px;
}


.toggleImages div {
font-size: 11px;
color:#333;
padding: 6px 10px 6px 10px;
cursor: pointer;
display: block;


}

.toggleImages:hover {
background: url(http://origin-st.deviantart.net/minish/messages/gmbutton2.gif) -1px -28px no-repeat;

}