center{z-index:100;position:absolute;top:0px;left:0px;} table, .sf{ display: none;} body {background-image: url(http://i9.photobucket.com/albums/a77/neor3/DOTS.gif); background-repeat:repeat; background-attachment:fixed; background-color:#000; overflow:hidden;} body, div, a { font: 7pt verdana; color:orange; margin-bottom:2px; line-height:20px;} textarea{ border: 2px dashed #fff ; width: 50px; height:25px; font-family:small fonts; font-size: 6pt; color:orange; text-transform:uppercase; background-color:limegreen; overflow-x:hidden; } right{ text-align:right;} #linky{ font-family:script mt bold, script; font-size:16pt; text-transform:lowercase; text-align:left; text-decoration:none; color:limegreen; border-right:5px solid limegreen; background-color:#fff; display:block; width:125px;} #linky:hover{ background-color:limegreen; letter-spacing:1px;} td, tr, table { line-height: 5px; font: 7pt georgia; color:orange; padding:0px; margin:0px;} h1{padding:10px; text-decoration:none; font-weight:normal; font-size:30pt; font-family:tahoma; text-transform:uppercase; text-align:right; color:#fff; background-color:royalblue; margin:0px; margin-top:5px; margin-bottom:10px; border-left:30px double #fff; letter-spacing:-4px; } h2{ font-weight:normal; font-size:20px; font-family:arial; text-transform:uppercase; font-weight:bold; padding-top:5px; text-align:center; color:orange; border-bottom:5px dotted deeppink;} a:link, a:visited, a:active{ font-family:monospace; text-transform:uppercase; text-decoration:none; color:royalblue;} a:hover { color:gold; letter-spacing:2px;} #lay{ width:100px; border:2px solid orange;} #lay:hover{ width:300px;} b { font-family:small fonts; color:royalblue; font-weight:bold; text-transform:uppercase; border-bottom:2px dashed deeppink} i { font: 7pt arial; font-weight:bold; color:limegreen; font-style:italic; text-transform:lowercase; } u{ font:7pt georgia; color:limegreen; border-bottom:1px dotted teal; } #aboutus,#port, #why, #application, #rules, #ranks,#credit{ cursor:nw-resize; position:absolute; left:400px; width: 400px; overflow:none; z-index:2; padding:5px; background-color:#ffffff; border-left:10px solid orange; border-right:10px solid orange; border-top:5px dashed orange; border-bottom:10px solid orange; padding-bottom:0px; text-align:justify;} #aboutus{top:25px;}#why{top:1000px;height:500px;overflow:auto;}#port{top:2000px;height:500px;overflow:auto;} #rules{top:3000px;height:500px; overflow:auto;}#ranks{top:5000px; height:500px; overflow:auto;}#application{top:6000px;}#credit{top:7000px;} #nav{ position:absolute; left:850px; top:25px; width:125px; height:365px; z-index:2; padding:5px; text-align:justify; background-color:#fff; border-top:5px dashed orange; border:10px solid orange; border-top:5px dashed orange; } #marginless{ margin-top:0px;} />

layouts

Here stand some layouts {user,petpage} for Creative Therapy members.

petpage

Elephant Petpage Code:

body {background-image: url(http://i37.photobucket.com/albums/e83/pooquibaby/elephant_pattern.gif);
background-repeat:repeat;
background-attachment:fixed;
background-color:#000;
overflow:hidden;}

body, div, a {
font: 7pt verdana;
color:teal;
margin-bottom:2px;
line-height:20px;}

textarea{
border: 2px dashed  #fff ;
width: 50px;
height:25px;
font-family:small fonts;
font-size: 6pt;
color:teal;
text-transform:uppercase;
background-color:skyblue;
overflow-x:hidden;
} 
right{
text-align:right;}
#linky{
font-family:script mt bold, script;
font-size:16pt;
text-transform:lowercase;
text-align:left;
text-decoration:none;
color:#skyblue;
border-right:5px solid skyblue;
background-color:#fff;
display:block;
width:125px;}
#linky:hover{
background-color:skyblue;
letter-spacing:1px;}

td, tr, table {
line-height: 5px;
font: 7pt georgia;
color:teal;
padding:0px;
margin:0px;}

h1{padding:10px;
text-decoration:none;
font-weight:normal;
font-size:30pt;
font-family:tahoma;
text-transform:uppercase;
text-align:right;
color:#fff;
background-color:gold;
margin:0px;
margin-top:5px;
margin-bottom:10px;
border-left:30px double #fff;
letter-spacing:-4px;
}
h2{
font-weight:normal;
font-size:20px;
font-family:arial;
text-transform:uppercase;
font-weight:bold;
padding-top:5px;
text-align:center;
color:teal;
border-bottom:5px dotted maroon;}

a:link, a:visited, a:active{
font-family:monospace;
text-transform:uppercase;
text-decoration:none;
color:gold;}
a:hover {
color:gold;
letter-spacing:2px;}

#lay{
width:100px;
border:2px solid teal;}
#lay:hover{
width:300px;}

b {
font-family:small fonts;
color:gold;
font-weight:bold;
text-transform:uppercase;
border-bottom:2px dashed maroon}

i {
font: 7pt broadway;
font-weight:bold;
color:skyblue;
font-style:italic;
text-transform:lowercase;
}

u{
font:7pt georgia;
color:skyblue;
border-bottom:1px dotted teal;
}

#aboutus,#port, #why, #application, #rules, #ranks,#credit{
cursor:nw-resize;
position:absolute;
left:400px;
width: 400px;
overflow:none;
z-index:2;
padding:5px;
background-color:#ffffff;
border-left:10px solid teal;
border-right:10px solid teal;
border-top:5px dashed teal;
border-bottom:10px solid teal;
padding-bottom:0px;
text-align:justify;}
#aboutus{top:25px;}#why{top:1000px;height:500px;overflow:auto;}#port{top:2000px;height:500px;overflow:auto;}
#rules{top:3000px;height:500px; overflow:auto;}#ranks{top:5000px; height:500px; overflow:auto;}#application{top:6000px;}#credit{top:7000px;}

#nav{
position:absolute;
left:850px;
top:25px;
width:125px;
height:365px;
z-index:2;
padding:5px;
text-align:justify;
background-color:#fff;
border-top:5px dashed teal;
border:10px solid teal;
border-top:5px dashed teal;
}
#marginless{
margin-top:0px;}

<div id="aboutus">
<a name="aboutus"></a>
<h1>About Graphics</h1>
<p>hello, good traveler. you have chosen this layout so I will educate you about it. This is <b>bold</b>, such as this is <i>italicss</i> and this is most certainly underline. Here is another type of header:<br></p>
<h2>header2</h2> enjoyy 8D
<p><a href="#nav" id="right">back to home</a>
</p>
</div>

<div id="why"> <a name="why"></a>
<h1>second</h1>
can you handle your second blogbox? XPP
<p><a href="#nav" id="right">back to home</a></p>
</div>

<div id="port"> <a name="port"></a>
<h1>third</h1>
this shall dance as your third talkit box ^^
<p><a href="#nav" id="right">back to home</a></p>
</div>

<div id="rules">
<a name="rules"></a><h1>fourth</h1>
this be yur fourth box to chat all about xD

<p><a href="#nav" id="right">back to home</a></p>
</div>
<div id="ranks">
<a name="ranks"></a><h1>fifth</h1>
this is your fifth box to speak of 8D
<p><a href="#nav" id="right">back to home</a></p>
</div>

<div id="application">
<a name="app"></a><h1>sixth</h1>
this is your sixth write in box XD
<p><a href="#nav" id="right">back to home</a></p>
</div>

<div id="credit">
<a name="credit"></a><h2>credit</h2>
Content by <a>chatdi</a>. <br>Coding by <b>chatdi</b> and <i>lsabellee</i>.
<p><a href="#nav" id="right">back to home</a></p>
</div>

<div id="nav">
<a name="nav"></a>
<h1>Nav</h1>
<a href="#aboutus" id="linky">first</a>
<a href="#why" id="linky">second</a>
<a href="#port" id="linky">thirdd</a>
<a href="#rules" id="linky">fourth</a>
<a href="#ranks" id="linky">fifth</a>
<a href="#app" id="linky">sixth</a>
<a href="http://www.neopets.com/guilds/guild.phtml?id=3773554" id="linky">sequester</a>

<a href="#credit" id="linky">credits</a><p>
</p>
<h2>reminder:</h2>
press F11 for best layout view 8D<div>

<div id="application">
<a name="app"></a><h1>misc. other</h1> Here be some misc. other codes, such as music, banners, etc.<br><b>Dot BG for UL {full}:</b><textarea><style></style>#main {background:url(http://i9.photobucket.com/albums/a77/neor3/DOTS.gif)}/>

Dot BG for UL {gray}:

back to home

About Graphics

Requests?

Portal

Fonts

layouts

petpage

credit

Nav

reminder: