HOME | DD

Description
/* set a max-width for the whole journal */ body div#devskin7808734 .gr-box { max-width:920px; margin:0px auto 0px auto; border:1px solid #a6b2a6; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* hide certain borders */ body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 i, body div#devskin7808734 .gr-top .gr, body div#devskin7808734 , body div#devskin7808734 i.gr3, body div#devskin7808734 .gr-body { border:none!important; } /* top of journal borders and other borders */ body div#devskin7808734 .gr-top { border-bottom:1px solid #a6b2a6; border-right:none; border-left:none; } /* hide certain things */ body div#devskin7808734 .gr-top .metadata img, body div#devskin7808734 i.gr1, body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 { display:none; } body div#devskin7808734 .gr-body .gr { border-top:none; border-right:none; border-left:none; } /* the top of the journal */ body div#devskin7808734 .gr-top { background:#DAE4D9 url(https://fc02.deviantart.net/fs71/f/2014/240/d/c/topfade_by_electricjonny-d7wzcyu.gif) repeat-x scroll center top; background: -webkit-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background: -moz-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background:linear-gradient(top, #E7F0E6 0%, #CCD9CD 75%); text-align:center; padding:0px 0px 0px 0px; } /* text align the top journal info */ body div#devskin7808734 .gr-top .metadata { text-align:center; } /* color of links in journal info */ body div#devskin7808734 .gr-top .metadata a { color:#89968A; } /* the journal author and category */ body div#devskin7808734 .gr-top .metadata .name, body div#devskin7808734 .gr-top .metadata .name a, body div#devskin7808734 .gr-top .metadata .category a { color:#000000; } body div#devskin7808734 .gr-top .metadata .name a:hover, body div#devskin7808734 .gr-top .metadata .category a:hover { color:#000000; text-decoration:underline; } /* no bullet on the category */ body div#devskin7808734 .gr-top .metadata ul li { list-style-type:none; } /* nudge the journal info up a tad */ body div#devskin7808734 .gr-top .metadata ul { margin-top:-5px; } /* main background */ body div#devskin7808734 .text { background:#2E3D35 url(https://fc01.deviantart.net/fs71/f/2014/206/7/6/skinbg_green_by_electricjonny-d7sb0fz.png) repeat; padding:20px; margin-bottom:-56px; } /* box-shadow on the content box's */ body div#devskin7808734 .shadow { box-shadow:6px 6px 6px #1B241F; -moz-box-shadow:6px 6px 6px #1B241F; -webkit-box-shadow:6px 6px 6px #1B241F; margin-top:20px; } /* the bottom holding the comment link */ body div#devskin7808734 .ppb { margin-top:14px; height:40px; border-top:1px solid #a6b2a6; background:#e7f0e6 url(https://fc06.deviantart.net/fs70/f/2014/206/0/a/ppb_by_electricjonny-d7sb0gc.gif) center bottom repeat-x; background: -webkit-linear-gradient(180deg, #e7f0e6, #ccd9cd); background: -moz-linear-gradient(180deg, #e7f0e6, #ccd9cd); background:linear-gradient(180deg, #E7F0E6, #CCD9CD); } /* the title of the journal */ body div#devskin7808734 .gr-top h2 { padding-top:65px; color:#2c3635; font-family:Palatino Linotype; font-size:20pt; text-shadow:2px 2px 3px #F2FCF1; } body div#devskin7808734 .gr-top h2 a { color:#2c3635!important; } /* the top image */ body div#devskin7808734 .gr-top .gr { padding:10px; background:transparent url(https://orig12.deviantart.net/f282/f/2014/208/9/e/journal_lightning_animated_by_electricjonny-d7sg6i4.png) no-repeat top center!important; height:135px; } /* title of the content box */ body div#devskin7808734 .newstitle { background:#EAEFE8; background: -webkit-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background: -moz-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background:linear-gradient(top, #F1F7EF 20%, #C6CCC5 100%); text-shadow:2px 2px 3px #F6F9F4; text-align:center; font-family:Palatino Linotype; font-size:18pt; padding:2px; border:1px solid #a6b2a6; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } body div#devskin7808734 .newstitle.good { background:#468451; background: -webkit-linear-gradient(top, #e6ede4, #468451); background: -moz-linear-gradient(top, #e6ede4, #468451); background:linear-gradient(top, #E6EDE4, #468451); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.bad { background:#A56565; background: -webkit-linear-gradient(top, #e6ede4, #a56565); background: -moz-linear-gradient(top, #e6ede4, #a56565); background:linear-gradient(top, #E6EDE4, #A56565); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.gold { background:#E5D81B; background: -webkit-linear-gradient(top, #fffced 20%, #e5d81b 100%); background: -moz-linear-gradient(top, #fffced 20%, #e5d81b 100%); background:linear-gradient(top, #FFFCED 20%, #E5D81B 100%); text-shadow:1px 1px 2px #F6F9F4; } /* the content box it's self */ body div#devskin7808734 .news { background:#ccd9cd url(https://fc00.deviantart.net/fs71/f/2014/206/0/8/skincontentbg_by_electricjonny-d7sb0fk.png) repeat; border:1px solid #a6b2a6; border-top:none; padding:0px 10px 10px 10px; font-size:12px; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -moz-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -webkit-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); } /* first letter of content */ body div#devskin7808734 .a:first-letter { font-size:14pt; } /* indent the first sentence of the content */ body div#devskin7808734 .a { text-indent:20px; margin:0px 0px 5px 0px; line-height:18px; } /* links in the content */ body div#devskin7808734 .news a { color:#0B7200; border-bottom:1px solid transparent; text-decoration:none; font-weight:normal; outline:none; text-shadow:1px 1px 0px rgba(0,0,0,.15); transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a:hover:not(.img) { color:#309923; border-bottom:1px solid #309923; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a:active:not(.img) { color:#125908; border-bottom:1px solid #125908; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } /* define the external links */ body div#devskin7808734 a .img:hover, body div#devskin7808734 a:hover .img, body div#devskin7808734 a:hover .img:hover { text-decoration:none!important; border-bottom:none!important; } body div#devskin7808734 .news a[class^='external'] { color:#053275; text-decoration:none; border-bottom:1px solid transparent; transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:hover:not(.img) { color:#0958BF; text-decoration:none; border-bottom:1px solid #0958BF; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:active:not(.img) { color:#042959; text-decoration:none; border-bottom:1px solid #042959; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } /* style links to show */ body div#devskin7808734 .news a.show { font-size:0px; } body div#devskin7808734 .news a.show:after { font-size:12px; content:attr(href); } body div#devskin7808734 a.external, body div#devskin7808734 a.external:after { display:inline; content:''!important; } /* style bold, since dA's style plays on it */ body div#devskin7808734 b { font-weight:bold; background:transparent; display:inline; } /* classes I can use to define certain things */ body div#devskin7808734 .red { color:#C90404; display:inline; } body div#devskin7808734 .blue { color:#052363; display:inline; } body div#devskin7808734 .green { color:#43895D; display:inline; } body div#devskin7808734 .big { font-size:13pt; display:inline; } body div#devskin7808734 .small { display:inline; font-size:7pt; position:relative; } body div#devskin7808734 .code { text-indent:0px; font-family:Courier New; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 .scroller { text-indent:0px; font-family:'Source Code Pro', courier; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 blockquote { text-indent:0px; border:none; } /* the comments link button */ body div#devskin7808734 a.commentslink { background:transparent url(https://99.82.246.199/journal/journal_comments.png) 0px 0px no-repeat; background: -webkit-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background: -moz-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background:linear-gradient(180deg, #DBEADA 20%, #B5C5B4 100%); border:1px solid #8BA68B; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:3px 3px 8px rgba(0,0,0,.35); -moz-box-shadow:3px 3px 8px rgba(0,0,0,.35); -webkit-box-shadow:3px 3px 8px rgba(0,0,0,.35); display:inline-block; padding:4px 6px 4px 6px; margin:8px 0px 0px 0px; text-indent:0px; text-decoration:none; word-spacing:auto; color:#2C3635; transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -moz-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -webkit-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -ms-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -o-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; } body div#devskin7808734 a:hover.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -37px no-repeat; background: -webkit-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background: -moz-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background:linear-gradient(top, #DBEADA 20%, #C8D6C7 100%); padding:6px 16px 6px 16px; margin:6px 0px 0px 0px; transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -o-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; } body div#devskin7808734 a:active.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -74px no-repeat; background: -webkit-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background: -moz-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background:linear-gradient(top, #C8D6C7 20%, #DBEADA 100%); box-shadow:1px 1px 4px rgba(0,0,0,.35); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.35); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.35); transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -o-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; } body div#devskin7808734 a.commentslink:first-letter { font-size:12px; } /* not used anymore, but the previous journals link */ body div#devskin7808734 a.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; display:none; } body div#devskin7808734 a:hover.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -27px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 a:active.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -54px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 .sig { position:relative; bottom:-30px; right:-8px; width:100px; } /* hide various things */ body div#devskin7808734 .preview, body div#devskin7808734 ul.f, body div#devskin7808734 .gr-top h2 img, body div#devskin7808734 i.tri, body div#devskin7808734 .hsep, body div#devskin7808734 div.drag-and-collect { display:none; } /* style the thumb-holder */ body div#devskin7808734 .thumb-holder { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } body div#devskin7808734 .thumb-holder2 { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* style the thumbs to remove the padding */ body div#devskin7808734 span.shadow { padding:0px; } /* title of the thumb-holder */ body div#devskin7808734 .thumb-holder b { display:block; color:#3F3F3F; font-size:16pt; text-align:center; text-shadow:2px 2px 4px #999999; margin-top:-10px; } body div#devskin7808734 .thumb-holder .thumb:hover { border-bottom:none; } body div#devskin7808734 .news .shadow.mild a:hover, body div#devskin7808734 .news .shadow.mild a:active { border:none!important; } /* remove box-shadow of thumbs - added in another place */ body div#devskin7808734 .thumb-holder .shadow { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; margin:-2px 0px -5px 0px; } body div#devskin7808734 .thumb-holder img { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; max-width:100%; } /* set up the transition */ body div#devskin7808734 .thumb-holder .shadow-holder { transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; } /* rotate the thumbs, kinda randomly */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1) { transform:rotate(4deg) scale(.8,.8); -moz-transform:rotate(4deg) scale(.8,.8); -webkit-transform:rotate(4deg) scale(.8,.8); -ms-transform:rotate(4deg) scale(.8,.8); -o-transform:rotate(4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2) { transform:rotate(-2deg) scale(.8,.8); -moz-transform:rotate(-2deg) scale(.8,.8); -webkit-transform:rotate(-2deg) scale(.8,.8); -ms-transform:rotate(-2deg) scale(.8,.8); -o-transform:rotate(-2deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3) { transform:rotate(1deg) scale(.8,.8); -moz-transform:rotate(1deg) scale(.8,.8); -webkit-transform:rotate(1deg) scale(.8,.8); -ms-transform:rotate(1deg) scale(.8,.8); -o-transform:rotate(1deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4) { transform:rotate(-4deg) scale(.8,.8); -moz-transform:rotate(-4deg) scale(.8,.8); -webkit-transform:rotate(-4deg) scale(.8,.8); -ms-transform:rotate(-4deg) scale(.8,.8); -o-transform:rotate(-4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } /* unrotate them and zoom up on hover */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4):hover { transform:rotate(0) scale(1,1); -moz-transform:rotate(0) scale(1,1); -webkit-transform:rotate(0) scale(1,1); -ms-transform:rotate(0) scale(1,1); -o-transform:rotate(0) scale(1,1); transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; box-shadow:6px 6px 8px rgba(0,0,0,.5); -moz-box-shadow:6px 6px 8px rgba(0,0,0,.5); -webkit-box-shadow:6px 6px 8px rgba(0,0,0,.5); z-index:99; } /* put the exact date on the timestamp */ body div#devskin7808734 li.author span:not(.name):not(.username-with-symbol):not(.user-symbol):after { content:' - 'attr(title); } /* the top and bottom box-shadow look */ body div#devskin7808734 .boxShadowTop { position:relative; top:-20px; margin:0px -20px -50px -20px; } body div#devskin7808734 .boxShadowBottom { position:relative; bottom:71px; margin:61px -20px -49px -20px; } /* the box shadow styles themselves */ body div#devskin7808734 .boxShadow1 { border-top:1px solid #000000; opacity:.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7808734 .boxShadow2 { border-top:1px solid #000000; opacity:.468203; filter:alpha(opacity=47); _zoom:1; } body div#devskin7808734 .boxShadow3 { border-top:1px solid #000000; opacity:.432504; filter:alpha(opacity=43); _zoom:1; } body div#devskin7808734 .boxShadow4 { border-top:1px solid #000000; opacity:.395469; filter:alpha(opacity=40); _zoom:1; } body div#devskin7808734 .boxShadow5 { border-top:1px solid #000000; opacity:.358121; filter:alpha(opacity=36); _zoom:1; } body div#devskin7808734 .boxShadow6 { border-top:1px solid #000000; opacity:.321018; filter:alpha(opacity=32); _zoom:1; } body div#devskin7808734 .boxShadow7 { border-top:1px solid #000000; opacity:.284532; filter:alpha(opacity=28); _zoom:1; } body div#devskin7808734 .boxShadow8 { border-top:1px solid #000000; opacity:.24895; filter:alpha(opacity=25); _zoom:1; } body div#devskin7808734 .boxShadow9 { border-top:1px solid #000000; opacity:.214517; filter:alpha(opacity=21); _zoom:1; } body div#devskin7808734 .boxShadow10 { border-top:1px solid #000000; opacity:.181468; filter:alpha(opacity=18); _zoom:1; } body div#devskin7808734 .boxShadow11 { border-top:1px solid #000000; opacity:.150042; filter:alpha(opacity=15); _zoom:1; } body div#devskin7808734 .boxShadow12 { border-top:1px solid #000000; opacity:.120494; filter:alpha(opacity=12); _zoom:1; } body div#devskin7808734 .boxShadow13 { border-top:1px solid #000000; opacity:.093113; filter:alpha(opacity=9); _zoom:1; } body div#devskin7808734 .boxShadow14 { border-top:1px solid #000000; opacity:.068233; filter:alpha(opacity=7); _zoom:1; } body div#devskin7808734 .boxShadow15 { border-top:1px solid #000000; opacity:.046259; filter:alpha(opacity=5); _zoom:1; } body div#devskin7808734 .boxShadow16 { border-top:1px solid #000000; opacity:.027692; filter:alpha(opacity=3); _zoom:1; } body div#devskin7808734 .boxShadow17 { border-top:1px solid #000000; opacity:.013171; filter:alpha(opacity=1); _zoom:1; } body div#devskin7808734 .boxShadow18 { border-top:1px solid #000000; opacity:.003549; filter:alpha(opacity=0); _zoom:1; } /* make text white so you can see it */ body div#devskin7808734 .writer.no-lub.put-art-here { color:#FFFFFF; } /* the button to go down to scripts */ body div#devskin7808734 .scripts { margin:20px 0px 0px 0px; background:rgb(220, 225, 220); background:rgba(220, 225, 220, .65); background: -webkit-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background: -moz-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background:linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); color:#FFFFFF; text-shadow:2px 2px 4px #000000; padding:4px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; position:absolute; text-decoration:none; transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:hover { background:rgb(250, 255, 250); background: -webkit-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background: -moz-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background:linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:active { background:rgb(251, 252, 253); background: -webkit-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background: -moz-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background:linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); transition:all 90ms ease-in-out; -moz-transition:all 90ms ease-in-out; -webkit-transition:all 90ms ease-in-out; -ms-transition:all 90ms ease-in-out; -o-transition:all 90ms ease-in-out; } /* testing html -
Title

Links: google - deviantart

Thumbs:thumb215696250: :thumb212025848: :thumb204696348: :thumb197056824: :thumb196923931: :thumb196465321: :thumb195777501: :thumb195600192: :thumb164427940: :thumb164848022: :thumb157628618: :thumb157754691:

.big

.small

.red

.blue
A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text
*/

Awesome Art + Fun Presentation

Here are some thumbs from my favourites I thought I'd share. But I'm not exactly writing this journal to show off the thumbs

Thumbs:thumb245809217: :thumb191354398: :thumb106043616:

By the way, this journal looks best in Firefox, IE (amazing right?), and Opera. Might also work in Safari - haven't checked. Oddly, it doesn't work so well in Chrome. There's a few bugs with Chrome still.

And just for some extra pizazz, here's a link to the dA forums , and here's an outgoing link to google . Notice the sexy color transition? And the different colors for each? With this skin, any deviantart.com domain is green, while outgoing links are blue with an outgoing symbol after it. All done with just CSS.

I'm not sure when CSS3 will be available for people to use, but I'm sure they'll announce it in due time

Description
/* set a max-width for the whole journal */ body div#devskin7808734 .gr-box { max-width:920px; margin:0px auto 0px auto; border:1px solid #a6b2a6; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* hide certain borders */ body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 i, body div#devskin7808734 .gr-top .gr, body div#devskin7808734 , body div#devskin7808734 i.gr3, body div#devskin7808734 .gr-body { border:none!important; } /* top of journal borders and other borders */ body div#devskin7808734 .gr-top { border-bottom:1px solid #a6b2a6; border-right:none; border-left:none; } /* hide certain things */ body div#devskin7808734 .gr-top .metadata img, body div#devskin7808734 i.gr1, body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 { display:none; } body div#devskin7808734 .gr-body .gr { border-top:none; border-right:none; border-left:none; } /* the top of the journal */ body div#devskin7808734 .gr-top { background:#DAE4D9 url(https://fc02.deviantart.net/fs71/f/2014/240/d/c/topfade_by_electricjonny-d7wzcyu.gif) repeat-x scroll center top; background: -webkit-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background: -moz-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background:linear-gradient(top, #E7F0E6 0%, #CCD9CD 75%); text-align:center; padding:0px 0px 0px 0px; } /* text align the top journal info */ body div#devskin7808734 .gr-top .metadata { text-align:center; } /* color of links in journal info */ body div#devskin7808734 .gr-top .metadata a { color:#89968A; } /* the journal author and category */ body div#devskin7808734 .gr-top .metadata .name, body div#devskin7808734 .gr-top .metadata .name a, body div#devskin7808734 .gr-top .metadata .category a { color:#000000; } body div#devskin7808734 .gr-top .metadata .name a:hover, body div#devskin7808734 .gr-top .metadata .category a:hover { color:#000000; text-decoration:underline; } /* no bullet on the category */ body div#devskin7808734 .gr-top .metadata ul li { list-style-type:none; } /* nudge the journal info up a tad */ body div#devskin7808734 .gr-top .metadata ul { margin-top:-5px; } /* main background */ body div#devskin7808734 .text { background:#2E3D35 url(https://fc01.deviantart.net/fs71/f/2014/206/7/6/skinbg_green_by_electricjonny-d7sb0fz.png) repeat; padding:20px; margin-bottom:-56px; } /* box-shadow on the content box's */ body div#devskin7808734 .shadow { box-shadow:6px 6px 6px #1B241F; -moz-box-shadow:6px 6px 6px #1B241F; -webkit-box-shadow:6px 6px 6px #1B241F; margin-top:20px; } /* the bottom holding the comment link */ body div#devskin7808734 .ppb { margin-top:14px; height:40px; border-top:1px solid #a6b2a6; background:#e7f0e6 url(https://fc06.deviantart.net/fs70/f/2014/206/0/a/ppb_by_electricjonny-d7sb0gc.gif) center bottom repeat-x; background: -webkit-linear-gradient(180deg, #e7f0e6, #ccd9cd); background: -moz-linear-gradient(180deg, #e7f0e6, #ccd9cd); background:linear-gradient(180deg, #E7F0E6, #CCD9CD); } /* the title of the journal */ body div#devskin7808734 .gr-top h2 { padding-top:65px; color:#2c3635; font-family:Palatino Linotype; font-size:20pt; text-shadow:2px 2px 3px #F2FCF1; } body div#devskin7808734 .gr-top h2 a { color:#2c3635!important; } /* the top image */ body div#devskin7808734 .gr-top .gr { padding:10px; background:transparent url(https://orig12.deviantart.net/f282/f/2014/208/9/e/journal_lightning_animated_by_electricjonny-d7sg6i4.png) no-repeat top center!important; height:135px; } /* title of the content box */ body div#devskin7808734 .newstitle { background:#EAEFE8; background: -webkit-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background: -moz-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background:linear-gradient(top, #F1F7EF 20%, #C6CCC5 100%); text-shadow:2px 2px 3px #F6F9F4; text-align:center; font-family:Palatino Linotype; font-size:18pt; padding:2px; border:1px solid #a6b2a6; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } body div#devskin7808734 .newstitle.good { background:#468451; background: -webkit-linear-gradient(top, #e6ede4, #468451); background: -moz-linear-gradient(top, #e6ede4, #468451); background:linear-gradient(top, #E6EDE4, #468451); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.bad { background:#A56565; background: -webkit-linear-gradient(top, #e6ede4, #a56565); background: -moz-linear-gradient(top, #e6ede4, #a56565); background:linear-gradient(top, #E6EDE4, #A56565); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.gold { background:#E5D81B; background: -webkit-linear-gradient(top, #fffced 20%, #e5d81b 100%); background: -moz-linear-gradient(top, #fffced 20%, #e5d81b 100%); background:linear-gradient(top, #FFFCED 20%, #E5D81B 100%); text-shadow:1px 1px 2px #F6F9F4; } /* the content box it's self */ body div#devskin7808734 .news { background:#ccd9cd url(https://fc00.deviantart.net/fs71/f/2014/206/0/8/skincontentbg_by_electricjonny-d7sb0fk.png) repeat; border:1px solid #a6b2a6; border-top:none; padding:0px 10px 10px 10px; font-size:12px; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -moz-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -webkit-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); } /* first letter of content */ body div#devskin7808734 .a:first-letter { font-size:14pt; } /* indent the first sentence of the content */ body div#devskin7808734 .a { text-indent:20px; margin:0px 0px 5px 0px; line-height:18px; } /* links in the content */ body div#devskin7808734 .news a { color:#0B7200; border-bottom:1px solid transparent; text-decoration:none; font-weight:normal; outline:none; text-shadow:1px 1px 0px rgba(0,0,0,.15); transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a:hover:not(.img) { color:#309923; border-bottom:1px solid #309923; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a:active:not(.img) { color:#125908; border-bottom:1px solid #125908; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } /* define the external links */ body div#devskin7808734 a .img:hover, body div#devskin7808734 a:hover .img, body div#devskin7808734 a:hover .img:hover { text-decoration:none!important; border-bottom:none!important; } body div#devskin7808734 .news a[class^='external'] { color:#053275; text-decoration:none; border-bottom:1px solid transparent; transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:hover:not(.img) { color:#0958BF; text-decoration:none; border-bottom:1px solid #0958BF; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:active:not(.img) { color:#042959; text-decoration:none; border-bottom:1px solid #042959; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } /* style links to show */ body div#devskin7808734 .news a.show { font-size:0px; } body div#devskin7808734 .news a.show:after { font-size:12px; content:attr(href); } body div#devskin7808734 a.external, body div#devskin7808734 a.external:after { display:inline; content:''!important; } /* style bold, since dA's style plays on it */ body div#devskin7808734 b { font-weight:bold; background:transparent; display:inline; } /* classes I can use to define certain things */ body div#devskin7808734 .red { color:#C90404; display:inline; } body div#devskin7808734 .blue { color:#052363; display:inline; } body div#devskin7808734 .green { color:#43895D; display:inline; } body div#devskin7808734 .big { font-size:13pt; display:inline; } body div#devskin7808734 .small { display:inline; font-size:7pt; position:relative; } body div#devskin7808734 .code { text-indent:0px; font-family:Courier New; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 .scroller { text-indent:0px; font-family:'Source Code Pro', courier; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 blockquote { text-indent:0px; border:none; } /* the comments link button */ body div#devskin7808734 a.commentslink { background:transparent url(https://99.82.246.199/journal/journal_comments.png) 0px 0px no-repeat; background: -webkit-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background: -moz-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background:linear-gradient(180deg, #DBEADA 20%, #B5C5B4 100%); border:1px solid #8BA68B; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:3px 3px 8px rgba(0,0,0,.35); -moz-box-shadow:3px 3px 8px rgba(0,0,0,.35); -webkit-box-shadow:3px 3px 8px rgba(0,0,0,.35); display:inline-block; padding:4px 6px 4px 6px; margin:8px 0px 0px 0px; text-indent:0px; text-decoration:none; word-spacing:auto; color:#2C3635; transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -moz-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -webkit-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -ms-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -o-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; } body div#devskin7808734 a:hover.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -37px no-repeat; background: -webkit-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background: -moz-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background:linear-gradient(top, #DBEADA 20%, #C8D6C7 100%); padding:6px 16px 6px 16px; margin:6px 0px 0px 0px; transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -o-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; } body div#devskin7808734 a:active.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -74px no-repeat; background: -webkit-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background: -moz-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background:linear-gradient(top, #C8D6C7 20%, #DBEADA 100%); box-shadow:1px 1px 4px rgba(0,0,0,.35); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.35); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.35); transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -o-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; } body div#devskin7808734 a.commentslink:first-letter { font-size:12px; } /* not used anymore, but the previous journals link */ body div#devskin7808734 a.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; display:none; } body div#devskin7808734 a:hover.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -27px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 a:active.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -54px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 .sig { position:relative; bottom:-30px; right:-8px; width:100px; } /* hide various things */ body div#devskin7808734 .preview, body div#devskin7808734 ul.f, body div#devskin7808734 .gr-top h2 img, body div#devskin7808734 i.tri, body div#devskin7808734 .hsep, body div#devskin7808734 div.drag-and-collect { display:none; } /* style the thumb-holder */ body div#devskin7808734 .thumb-holder { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } body div#devskin7808734 .thumb-holder2 { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* style the thumbs to remove the padding */ body div#devskin7808734 span.shadow { padding:0px; } /* title of the thumb-holder */ body div#devskin7808734 .thumb-holder b { display:block; color:#3F3F3F; font-size:16pt; text-align:center; text-shadow:2px 2px 4px #999999; margin-top:-10px; } body div#devskin7808734 .thumb-holder .thumb:hover { border-bottom:none; } body div#devskin7808734 .news .shadow.mild a:hover, body div#devskin7808734 .news .shadow.mild a:active { border:none!important; } /* remove box-shadow of thumbs - added in another place */ body div#devskin7808734 .thumb-holder .shadow { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; margin:-2px 0px -5px 0px; } body div#devskin7808734 .thumb-holder img { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; max-width:100%; } /* set up the transition */ body div#devskin7808734 .thumb-holder .shadow-holder { transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; } /* rotate the thumbs, kinda randomly */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1) { transform:rotate(4deg) scale(.8,.8); -moz-transform:rotate(4deg) scale(.8,.8); -webkit-transform:rotate(4deg) scale(.8,.8); -ms-transform:rotate(4deg) scale(.8,.8); -o-transform:rotate(4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2) { transform:rotate(-2deg) scale(.8,.8); -moz-transform:rotate(-2deg) scale(.8,.8); -webkit-transform:rotate(-2deg) scale(.8,.8); -ms-transform:rotate(-2deg) scale(.8,.8); -o-transform:rotate(-2deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3) { transform:rotate(1deg) scale(.8,.8); -moz-transform:rotate(1deg) scale(.8,.8); -webkit-transform:rotate(1deg) scale(.8,.8); -ms-transform:rotate(1deg) scale(.8,.8); -o-transform:rotate(1deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4) { transform:rotate(-4deg) scale(.8,.8); -moz-transform:rotate(-4deg) scale(.8,.8); -webkit-transform:rotate(-4deg) scale(.8,.8); -ms-transform:rotate(-4deg) scale(.8,.8); -o-transform:rotate(-4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } /* unrotate them and zoom up on hover */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4):hover { transform:rotate(0) scale(1,1); -moz-transform:rotate(0) scale(1,1); -webkit-transform:rotate(0) scale(1,1); -ms-transform:rotate(0) scale(1,1); -o-transform:rotate(0) scale(1,1); transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; box-shadow:6px 6px 8px rgba(0,0,0,.5); -moz-box-shadow:6px 6px 8px rgba(0,0,0,.5); -webkit-box-shadow:6px 6px 8px rgba(0,0,0,.5); z-index:99; } /* put the exact date on the timestamp */ body div#devskin7808734 li.author span:not(.name):not(.username-with-symbol):not(.user-symbol):after { content:' - 'attr(title); } /* the top and bottom box-shadow look */ body div#devskin7808734 .boxShadowTop { position:relative; top:-20px; margin:0px -20px -50px -20px; } body div#devskin7808734 .boxShadowBottom { position:relative; bottom:71px; margin:61px -20px -49px -20px; } /* the box shadow styles themselves */ body div#devskin7808734 .boxShadow1 { border-top:1px solid #000000; opacity:.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7808734 .boxShadow2 { border-top:1px solid #000000; opacity:.468203; filter:alpha(opacity=47); _zoom:1; } body div#devskin7808734 .boxShadow3 { border-top:1px solid #000000; opacity:.432504; filter:alpha(opacity=43); _zoom:1; } body div#devskin7808734 .boxShadow4 { border-top:1px solid #000000; opacity:.395469; filter:alpha(opacity=40); _zoom:1; } body div#devskin7808734 .boxShadow5 { border-top:1px solid #000000; opacity:.358121; filter:alpha(opacity=36); _zoom:1; } body div#devskin7808734 .boxShadow6 { border-top:1px solid #000000; opacity:.321018; filter:alpha(opacity=32); _zoom:1; } body div#devskin7808734 .boxShadow7 { border-top:1px solid #000000; opacity:.284532; filter:alpha(opacity=28); _zoom:1; } body div#devskin7808734 .boxShadow8 { border-top:1px solid #000000; opacity:.24895; filter:alpha(opacity=25); _zoom:1; } body div#devskin7808734 .boxShadow9 { border-top:1px solid #000000; opacity:.214517; filter:alpha(opacity=21); _zoom:1; } body div#devskin7808734 .boxShadow10 { border-top:1px solid #000000; opacity:.181468; filter:alpha(opacity=18); _zoom:1; } body div#devskin7808734 .boxShadow11 { border-top:1px solid #000000; opacity:.150042; filter:alpha(opacity=15); _zoom:1; } body div#devskin7808734 .boxShadow12 { border-top:1px solid #000000; opacity:.120494; filter:alpha(opacity=12); _zoom:1; } body div#devskin7808734 .boxShadow13 { border-top:1px solid #000000; opacity:.093113; filter:alpha(opacity=9); _zoom:1; } body div#devskin7808734 .boxShadow14 { border-top:1px solid #000000; opacity:.068233; filter:alpha(opacity=7); _zoom:1; } body div#devskin7808734 .boxShadow15 { border-top:1px solid #000000; opacity:.046259; filter:alpha(opacity=5); _zoom:1; } body div#devskin7808734 .boxShadow16 { border-top:1px solid #000000; opacity:.027692; filter:alpha(opacity=3); _zoom:1; } body div#devskin7808734 .boxShadow17 { border-top:1px solid #000000; opacity:.013171; filter:alpha(opacity=1); _zoom:1; } body div#devskin7808734 .boxShadow18 { border-top:1px solid #000000; opacity:.003549; filter:alpha(opacity=0); _zoom:1; } /* make text white so you can see it */ body div#devskin7808734 .writer.no-lub.put-art-here { color:#FFFFFF; } /* the button to go down to scripts */ body div#devskin7808734 .scripts { margin:20px 0px 0px 0px; background:rgb(220, 225, 220); background:rgba(220, 225, 220, .65); background: -webkit-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background: -moz-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background:linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); color:#FFFFFF; text-shadow:2px 2px 4px #000000; padding:4px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; position:absolute; text-decoration:none; transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:hover { background:rgb(250, 255, 250); background: -webkit-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background: -moz-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background:linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:active { background:rgb(251, 252, 253); background: -webkit-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background: -moz-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background:linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); transition:all 90ms ease-in-out; -moz-transition:all 90ms ease-in-out; -webkit-transition:all 90ms ease-in-out; -ms-transition:all 90ms ease-in-out; -o-transition:all 90ms ease-in-out; } /* testing html -
Title

Links: google - deviantart

Thumbs:thumb215696250: :thumb212025848: :thumb204696348: :thumb197056824: :thumb196923931: :thumb196465321: :thumb195777501: :thumb195600192: :thumb164427940: :thumb164848022: :thumb157628618: :thumb157754691:

.big

.small

.red

.blue
A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text
*/

Awesome Art + Fun Presentation

Here are some thumbs from my favourites I thought I'd share. But I'm not exactly writing this journal to show off the thumbs

Thumbs:thumb245809217: :thumb191354398: :thumb106043616:

By the way, this journal looks best in Firefox, IE (amazing right?), and Opera. Might also work in Safari - haven't checked. Oddly, it doesn't work so well in Chrome. There's a few bugs with Chrome still.

And just for some extra pizazz, here's a link to the dA forums , and here's an outgoing link to google . Notice the sexy color transition? And the different colors for each? With this skin, any deviantart.com domain is green, while outgoing links are blue with an outgoing symbol after it. All done with just CSS.

I'm not sure when CSS3 will be available for people to use, but I'm sure they'll announce it in due time