#####################################################
## JOURNAL BODY #####################################
#####################################################  
To write in your journal you need to use paragraph tags (<p> ... </p>) Open them when you want to write freely, and close them when you want to add a div or import chatter, ie:

<p>....

....

....</p>

<div class="note"> BOo!</div>

<p>....

....</p>

To create a note box, use <div class="note"> ... </div>
There are two other types of note, <div class="light note"> ... </div> and <div class="postit note"> ... </div>

To create an artist feature box, use:

<div class="feature">
<u>:iconUSERNAME:</u>
<em><ul>
 <li>:devUSERNAME:</li>
 <li>NAME</li>
 <li>DEVIANT TYPE</li></ul>
:thumb###: :thumb###: :thumb###: :thumb###: :thumb###:</em></div>

...or just stick thumbs in a note box ;p

To quote someone, use the following:

<blockquote>:iconUSERNAME: <em>&#147;</em> QUOTE GOES HERE </blockquote>

To code your posts as if they where dAmn chat, you can use http://devart.koopseht.net/damnimport/ to convert them for you, but if you want to do it by hand, use the following as a reference:

<strike>*** You have joined #devart *</strike>
<strike>** <b>username</b> has joined</strike>
<p><strong><username></strong> username: :rofl:</p>
<p><strong><username></strong> <em>your-username: :eyes:</em></p>
<p><u><i><your-username></i></u> username: why hello there :)</p>
<strong>* username <i>will brb</i></strong>
<strike>** <b>username</b> has left [connection closed]</strike>

To use thumb emotes, wrap them in italic tags to turn off the drop-shadow - ie, <i>:thumb#####:</i>

If you want to quote chunks of dAmn chatter, wrap it in <div class="quote"> ... </div>, for instance:

<div class="quote">
<p><strong><wroth></strong> brb, squats lunges etc</p>
<p><u><i><thespook></i></u> wroth: yeah. bathroom break for me too. </p>
</div>



#####################################################
## HEADER ###########################################
#####################################################
<div class="top_">
<b>deviantART<sup>journal</sub> <u>Beta 0.3</u></b> | :devUSERNAME: 

<code><a href="#">Website</a> | <a href="#">Journal</a> | <a href="#">Favs</a> | <a href="#">Gallery</a> 

| <em>CSS<sub><a href="http://frozenpandaman.deviantart.com/art/dAmn-Journal-CSS-v3-78608568">Original concept</a>: :devfrozenpandaman: <br /><a href="http://thespook.deviantart.com/art/dAmn-journal-skin-CSS-79128018">Journal CSS</a> coded by :devthespook:</sub></em></code>
</div>

<div class="tabs_">
<u>#journal</u> :#Resources: :#spooked: 

<i><a href="http://www.deviantart.com" title="go to deviantart.com's homepage"></a></i>
</div>

#####################################################

- Change the username to your own on the second line.
- On the line that begins '<code>...' change the links to whatever you like, but keep in mind that you can't fit too many @ 1024x768
- It is a condition of using this skin that you keep either the '<em>CSS...' section in the header, OR the 'get This Journal Skin!' privclass in the sidebar to credit the creators, and so that people can find the CSS if they want to use it.
- The line beginning with '<div class="tabs_">...' is what creates the tab bar.
  - The default journal tab is wrapped in <u></u> tags, you can rename it if you like, and you should only have one of these at the beginning.
  - The other tabs are created by using the dAmn code (as you can see there), or by hand coding the links. 
  - The link inside the italic tags (<i>...</i>) creates the red X that links back to deviantART's homepage. If you don't want it to link to the homepage, remove the link, but leave the italic tags to keep the red X there.

#####################################################
## FOOTER ###########################################
#####################################################
<div class="sidebar">
 <b>Author</b>
 <div>:devUSERNAME: <sup>:iconUSERNAME: <i>you can write anything here. just not too much.</i></sup></div>

 <b>Featured Deviants</b>
 <div>:devUSERNAME:<sub>:thumb####:</sub></div>

 <b>pimping!</b>
 <div>clubs!
  <strong>:iconUSERNAME: :iconUSERNAME: :iconUSERNAME:</strong>
 </div>
 <div>shtamps :spin:
 <strong>:thumb####: :thumb####: :thumb####:</strong>
 </div>

 <b><a href="#">get this journal skin!</a></b>
 <div>:devfrozenpandaman: <sup>:iconfrozenpandaman: <i>responsible for <a href="http://frozenpandaman.deviantart.com/art/dAmn-Journal-CSS-v3-78608568">original concept</a></i></sup></div>
 <div>:devthespook: <sup>:iconthespook: <i>took the concept and turned it into the <a href="http://thespook.deviantart.com/art/dAmn-journal-skin-CSS-79128018">journal CSS</a> you see now.</i></sup></div>
</div>

<div class="bottom_">YOUR-USERNAME - #journal <img src="http://i.deviantart.com/icons/damn/lines.png" alt="" class="lines" /> <i></i></div>

#####################################################

The code above creates the sidebar privclasses and the footer.
- Privclass titles are created by putting text in bold tags, as you can see above. 
- Usernames are added inside <div> tags, as you can see above. 
  - The <sup> tags create the popup, with avatar codes first, then <i></i> tags holding any text you want inside them. You can use two groups of <i></i> tags to force to lines of text (ie if you wanted to emulate the way dAmn displays the user's name and deviant type)
- If you want to have a thumb appear next to a username instead, use <sub> tags and place the thumb code within it. In this version of dAmn #journal you can only put one thumb inside the <sub> tags.
- If you want to show more than one thumb, a list of avatars (your clubs etc) or a list of stamps, use <strong> tags as you can see above. Watch out though, if you put 50 avatars/stamps on one line, that's how they'll show up in your journal, all of them on one line - so break them up on to seperate lines.
- In the '<div class="bottom_">...' section, change the username to your own, and the #journal to match the #journal tab if you changed it's contents.
- Again, it is a condition of using this skin that you keep either the '<em>CSS...' section in the header, OR the 'get This Journal Skin!' privclass in the sidebar to credit the creators, and so that people can find the CSS if they want to use it.

#####################################################
## DAS CSS  #########################################
#####################################################

There should be no need to change any of the CSS below, just copy it as-is.

#####################################################

.journalbox{border:1px solid #546359;-moz-border-radius:4px 4px 0 0;padding-top:52px;background:#BBC2BB}
.journaltop{background:transparent!important;font-size:11px;padding:10px 0 0 9px}
.journaltop h2{background:#A8ADA8;font-size:13px;font-family:verdana!important;font-weight:normal;padding:3px;position:absolute;top:79px;left:9px;right:151px;color:#000;border:1px solid #546359;letter-spacing:.1px;_width:75%;}
.journaltop img{display:none}

.top_ br{display:none}
.top_ {background:#88938D;color:#A7C0A9;position:absolute;top:0;left:0;right:0;_width:100%;height:18px;padding:4px 0;font-size:11px;-moz-border-radius:4px 4px 0 0;border:1px solid #546359}
.top_ code{display:block;margin:0;position:absolute;top:1px;right:10px;height:20px;padding:6px 0;font-family:verdana}
.top_ sup{color:#AFB8AF}
.top_ b{padding-left:10px;color:#DAE4DA}
.top_ a{text-decoration:none!important;color:#DAE4DA!important;}
.top_ a:hover{text-decoration:underline!important}
.top_ u{color:#852900;text-decoration:none!important}

.top_ code em{color:#BEC4C1;font-style:normal;position:relative}
.top_ em sub{display:none;z-index:99;position:absolute;width:200px;right:0;text-align:right;top:12px;padding-top:10px;color:#000}
.top_ em sub a{color:#000!important}
.top_ em:hover sub{display:block}

.tabs_ br{display:none}
.tabs_ {border-bottom:1px solid #546359;background:#A8ADA8;position:absolute;top:28px;left:1px;right:1px;_width:100%;padding:7px 20px 0 0}
.tabs_ u{text-decoration:none!important;border:solid #546359;border-width:1px 1px 0 1px;background:#BBC2BB;font-weight:bold;padding:3px 10px 5px 10px;margin-bottom:-1px;font-size:11px;float:left;margin-left:5px}

.tabs_ a{text-decoration:none!important;border:solid #8F9790;border-width:1px 1px 0 1px;background:#AEB3AE;font-weight:bold;padding:3px 10px 3px 10px;font-size:11px;float:left;margin-left:5px;position:relative;bottom:-1px;color:#757975}

.tabs_ a:hover{border-color: #546359;border-bottom:1px solid #BBC2BB;background:#BBC2BB;padding:3px 10px 3px 10px;color:#000}
.tabs_ i{width:20px;height:20px;display:block;background:url(http://i.deviantart.com/icons/damn/close.png) no-repeat;position:absolute;top:30px;right:3px}
.tabs_ i a{width:20px;height:20px;display:block;border:0;padding:0;background:none!important}

.journaltext{margin:26px 150px 50px 8px;background:#D2D8D2;border:1px solid #546359;padding:5px 5px 20px 5px;vertical-align:bottom!important;min-height:300px;max-height:600px;overflow:auto}
.journaltext br{display:none}
.journaltext p br{display:inline}

p{display:table;margin:2px 0 2px 0!important;}
strike{color:#88938D;font-style:normal;text-decoration:none;display:block;margin:2px 0}
p u i{text-decoration:none;background:#E2E8E2;color:#000;padding:0 1px;font-style:normal;font-weight:bold}
p em{text-decoration:none;background:#E2E8E2;color:#000;padding:0 1px;font-style:normal}

p u{display:table-cell;padding-right:2px}
p strong{display:table-cell;padding-right:2px;font-style:normal}

strong{font-style:italic}
strong i{font-weight:normal}

 .feature{display:block;border:1px solid #546359;background:#BBC2BB url(http://i.deviantart.com/icons/damn/close.png) top right no-repeat;margin:5px}
 .feature em{display:table-cell;vertical-align:top;padding:10px;font-style:normal}
 .feature u{display:table-cell;border-right:1px solid #546359;width:50px;padding:5px;background:#A8ADA8}
 .feature ul{margin:0 0 20px 20px!important;padding:0!important}
 .feature ul li{margin:0!important}

blockquote{border:solid #A8ADA8;border-width:1px 1px 1px 60px;padding:10px 10px 10px 25px;position:relative;min-height:50px;background:#BBC2BB;font-size:15px}
blockquote .avatar{position:absolute!important;top:5px;left:-55px}
blockquote em{font-size:35px;padding-right:10px;font-family:serif;font-weight:bold;position:absolute;top:5px;left:1px;color:#999}


.sidebar{position:absolute;top:100px;right:1px;width:150px}
.sidebar br{display:none}
.sidebar a{text-decoration:none!important}
.sidebar b{display:block;margin-top:10px;padding-left:5px;word-spacing:-4px;text-transform:capitalize}
.sidebar div{padding:2px 0 2px 10px;position:relative}

.sidebar div {position:relative}
.sidebar div:hover a{color:#000;text-decoration:underline!important}
.sidebar div:hover{color:#000}
.sidebar div:hover sup{color:#393D3C;z-index:99}

.sidebar sup{display:none;text-align:left;position:absolute;width:100px;height:55px;padding-top:5px;top:-20px;background:#BBC2BB;border:solid #546359;border-width:1px 0 1px 1px;text-align:center;vertical-align:center}

.sidebar div:hover sup{right:150px;display:block}
.sidebar sup .avatar{padding:5px 5px;background:#A8ADA8;border:1px solid #546359; position:absolute!important;top:-1px!important;right:100px!important}
.sidebar sup i{display:list-item;text-align:left;list-style:disc outside;margin:0 0 0 5px;font-style:normal}

.sidebar sub{right:-999em;position:absolute;max-width:150px;max-height:160px;padding:5px 20px 5px 5px;top:-5px;background:#BBC2BB;border:solid #546359;border-width:1px 0 1px 1px;text-align:center;vertical-align:center;_display:none}
.sidebar div:hover sub{right:150px}


.sidebar strong{display:none;text-align:left;position:absolute;_width:300px;min-width:250px;right:150px;height:auto;overflow:auto;padding-top:5px;top:-20px;background:#BBC2BB;border:solid #546359;border-width:1px 0 1px 1px;text-align:center;vertical-align:center;white-space:pre;padding:5px}
.sidebar strong br{display:inline}
.sidebar strong .avatar{margin:2px}
.sidebar div:hover strong{display:block;z-index:99}




.STAMP_HIDING_CODE_OF_DOOM{}
.sidebar .shadow-holder{display:none}
.sidebar sub .shadow-holder{display:block!important}
.sidebar strong .shadow-holder{display:block!important;float:left}
.END_STAMP_HIDING_CODE_OF_DOOM{}

.journalbottom{font-size:0}
.commentslink{text-decoration:none!important;color:#aaa;font-size:12px;position:absolute;bottom:25px;left:20px;display:block;right:155px;text-align:left;}
.commentslink:hover{color:#000}
.prevlink{display:none}

.bottom_{position:absolute;bottom:22px;left:10px;right:155px}
.bottom_ .lines{position:relative;top:6px;left:5px}
.bottom_ i{display:block;border:3px inset #fff;height:15px;width:99%;background:#fff;margin-top:3px}

ul.f{display:none}

i .shadow{background:none!important}

.note br{display:inline}
.note{padding:10px 20px 10px 10px;border:1px solid #546359;background:#BBC2BB url(http://i.deviantart.com/icons/damn/close.png) top right no-repeat;margin:5px;color:#000}

.note.light{border-color:#99A39B;background:#C8CEC8 url(http://i.deviantart.com/icons/damn/close.png) top right no-repeat}
.note.postit{border-color:#A2AA76;background:#DADEAC url(http://i.deviantart.com/icons/damn/close.png) top right no-repeat}


ul br{display:none!important}
ol br{display:none!important}
li br{display:inline!important}
li{margin-bottom:5px}

.quote{margin:10px 0 10px 50px;border-left:1px dotted #aaa;padding:20px}