Dream's coding

[Jack'Aran]

<style type="text/css">

/*

<a href="http://www.justiceleaguerpc.proboards.com/index.cgi?board=general&action=display&thread=1" target="_blank"><img src="http://img.photobucket.com/albums/v504/col_jack_oneil_Sg1/Icons/Batsymbol6-1.jpg" height="60" width="100"></a>

<a href="http://www.justiceleaguerpc.proboards.com/index.cgi?board=general&action=display&thread=2" target="_blank"><img src="http://img.photobucket.com/albums/v504/col_jack_oneil_Sg1/Icons/Batsymbol11-1.jpg" height="60" width="100"></a>
<a href="http://www.justiceleaguerpc.proboards.com/index.cgi?board=general&action=display&thread=110" target="_blank"><img src="http://img.photobucket.com/albums/v504/col_jack_oneil_Sg1/Icons/Batsymbol8.jpg" height="60" width="100"></a>

*/



/* http://www.motobit.com/tips/detpg_html-bar-graph-chart/ */

/* http://asylums.insanejournal.com/rp_tutorials/tag/layouts:+character+profiles */


/* Scroll bar Coding from Thor */

::-webkit-scrollbar {
                   width: 15px;
                   }

::-webkit-scrollbar-track {
                          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                          border-radius: 0px; background-color: transparent;
                          }

::-webkit-scrollbar-thumb {
                         border-radius: 0px;
                         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
                         background-color:#399;
                         }


::-moz-scrollbar {
                   width: 15px;
                   }

::-moz-scrollbar-track {
                          -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                          border-radius: 0px; background-color: transparent;
                          }

::-moz-scrollbar-thumb {
                         border-radius: 0px;
                         -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
                         background-color:#399;
                         }

#profile {width: 0;}
#profile {background-color: transparent;}
#profile {border-color: transparent; color: FFFFFF}
#profile {float: left; margin-left: 0%; margin-right: 50%;}

.pfor {color: transparent;} .pfor {color: ;}
.pfor {display: none;}
.pfor {float: left; margin-left: 5%; margin-right: 5%;}


body {background-color: Black;}
body {background-image:url("");
background-attachment:fixed; no-repeat;
background-size: 100%;
}

ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}

.HL {background: #FF0000; color: #FFFFFF;}  

a:link, a:visited {
color: #066;
text-shadow: #096 0px 0px 10px;
text-decoration:none;  /* removes the underline */
}

a:hover {
color: #F00;
text-shadow: #000 0px 0px 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

strong {
color:#FFF;
}

i {
color:#CCC;
}

. {
cursor:url(http://img.photobucket.com/albums/v504/col_jack_oneil_Sg1/Icons/Cryptographerv2.png), auto !important;
}


h1 {
color:#000;
margin-top:15px;
font-family:'Copperplate Gothic Bold' !important;
line-height:7px;
letter-spacing:-3px;
font-weight:normal;
font-size:40px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #FF0 0px 0px 25px;
}

h2 {
color:#FFFFFF;
margin-top:15px;
font-family:'Copperplate Gothic Bold' !important;
line-height:7px;
letter-spacing:3px;
font-weight: thick;
font-size:16px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #000 0px 0px 10px;
}


h3 {
color:#ccc;
margin-top:5px;
font-family:'Times new Roman' !important;
letter-spacing:1px;
font-weight: normal;
font-size:14px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #009 0px 0px 10px;
}

h3 hover {
text-shadow: #096 0px 0px 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

}

#base {
color: 9999FF;
background-color: black;
text-align: center;
width: 700px;
height: 400px;
padding: 3px;
border-width: 5px;
border-color: 999999;
position: absolute;
top: 0px;
left: 0px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 1%, #000022 3%, #000000 45%, #000011 65%, #000000 75%, #000022 100%); /* FF3.6+ */
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #002; */
max-width:800px;
max-height:600px;
border-radius: 10px;

-webkit-box-shadow:inset 1px 1px 25px 1px #009;
-moz-box-shadow:inset 1px 1px 25px 1px #009;
box-shadow:inset 1px 1px 25px 1px #009;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 1px;
}


#anchor {
width: 700px;
height: 390px;
overflow: hidden;
}

#content {
text-align:left;
width: 690px;
height: 390px;
overflow: auto;
padding-left:5px;
padding-right:5px;
}


#sidebar {
color: #00CCCC;
background-color: black;
text-align: center;
width: 350px;
height: 230px;
padding: 3px;
border-width: 5px;
border-color: 999999;
position: absolute;
top: 0px;
left: 705px;


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 1%, #000022 3%, #000000 45%, #000011 65%, #000000 75%, #000022 100%); /* FF3.6+ */
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #002; */
max-width:800px;
max-height:600px;
border-radius: 10px;

-webkit-box-shadow:inset 1px 1px 25px 1px #009;
-moz-box-shadow:inset 1px 1px 25px 1px #009;
box-shadow:inset 1px 1px 25px 1px #009;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 1px;

background:url();
background-position: center;
background-color:black;
background-size:80%;
background-repeat: no-repeat;
}

#sbanchor {
width: 350px;
height: 600px;  
overflow: hidden;
}

#sbcontent {
text-align:left;
width: 345px;
height: 245px;
overflow: auto;
padding-left:5px;
padding-right:5px;
font-size:12px;
}    

#sbcover {
text-align:left;
width: 345px;
height: 230px;
overflow: auto;
padding-left:5px;
padding-right:5px;
font-size:12px;

background:url(http://24.media.tumblr.com/2a4560ad6668e9554af13ceaa8beb44f/tumblr_mwpp0feK621rg556io1_500.jpg);
background-position: center;
background-color:black;
background-size:80%;
background-repeat: no-repeat;

-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.scover:hover {
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;

opacity:0;
}


#sbcontent i {
font-size:12px;
}

#navigation {
color: 3366FF;
background-color: transparent;
text-align: center;
width: 700px;
height: 60px;
padding: 1px;
border-style: none; /*solid */
border-width: thick;
border-color: #0CC;
position: absolute;
top: 400px;
left: 0px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;
}


#navigation a:link, a:visited {
color: #066;
text-shadow: #096 0px 0px 10px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#navigation a:hover {
color: #F00;
text-shadow: #000 0px 0px 10px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}


#File1 { /*Left file*/
float: left;
text-align: left;
margin-left: 10px;
}

#File2 { /*Mobile file*/
float: left;
text-align: left;
margin-left: 125px;
}

#File3 { /*Right file*/
float: right;
text-align: left;
margin-left: 0px;
}

</style>



<div id="base">


<div id="anchor">


<a name=""></a>
<div id="content"><br><br>

<h1>OOC</h1>




</div>


<a name="one"></a>
<div id="content"><br><br>

<h1>Stats</h1>


<br>
<br>



</div>
<a name="two"></a>
<div id="content"><br><br>
<h1>History</h1>
<br>
<br>
<br>


<br><br>
</div>
<a name="three"></a>
<div id="content"><br><br>

<h1>Personality</h1>
<br>


<br><br>
</div>
<a name="four"></a>
<div id="content"><br><br>



<br><br>
</div>

</div>
</div>


<div id="sidebar">
<div id="sbanchor">
<a name=""></a>
<div id="sbcontent">
<div id="sbcover" class="scover" style="overflow: hidden; position: absolute;">

</div>
</div>


</div>
</div>  


<div id="navigation">

<div id="file1">
<h3>Batman Files</h3>
<a href="#one">Stats</a>
<br><a href="#two">History</a>
<br><a href="#three">Personality</a>
<br><a href="#four">Abilities</a>
<br><a href="#five">Romantic Interests</a>
</div>


</div>

[Jack'Aran]

<style type="text/css">

/* Scroll bar Coding from Thor */

::-webkit-scrollbar {
                   width: 15px;
                   }

::-webkit-scrollbar-track {
                          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                          border-radius: 0px; background-color: transparent;
                          }

::-webkit-scrollbar-thumb {
                         border-radius: 0px;
                         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
                         background-color:#399;
                         }


::-moz-scrollbar {
                   width: 15px;
                   }

::-moz-scrollbar-track {
                          -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                          border-radius: 0px; background-color: transparent;
                          }

::-moz-scrollbar-thumb {
                         border-radius: 0px;
                         -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
                         background-color:#399;
                         }

#profile {width: 0;}
#profile {background-color: transparent;}
#profile {border-color: transparent; color: FFFFFF}
#profile {float: left; margin-left: 0%; margin-right: 50%;}

.pfor {color: transparent;} .pfor {color: ;}
.pfor {display: none;}
.pfor {float: left; margin-left: 5%; margin-right: 5%;}


body {background-color: Black;}
body {background-image:url("");
background-attachment:fixed; no-repeat;
background-size: 100%;
}

ul {list-style-type:none; margin:0; padding:0;}
li {display:inline;}

.HL {background: #FF0000; color: #FFFFFF;}  

a:link, a:visited {
color: #066;
text-shadow: #096 0px 0px 10px;
text-decoration:none;  /* removes the underline */
}

a:hover {
color: #F00;
text-shadow: #000 0px 0px 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

strong {
color:#FFF;
}

i {
color:#CCC;
}

. {
cursor:url(http://img.photobucket.com/albums/v504/col_jack_oneil_Sg1/Icons/Cryptographerv2.png), auto !important;
}


h1 {
color:#000;
margin-top:15px;
font-family:'Copperplate Gothic Bold' !important;
line-height:7px;
letter-spacing:-3px;
font-weight:normal;
font-size:40px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #FF0 0px 0px 25px;
}

h2 {
color:#FFFFFF;
margin-top:15px;
font-family:'Copperplate Gothic Bold' !important;
line-height:7px;
letter-spacing:3px;
font-weight: thick;
font-size:16px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #000 0px 0px 10px;
}


h3 {
color:#ccc;
margin-top:5px;
font-family:'Times new Roman' !important;
letter-spacing:1px;
font-weight: normal;
font-size:14px;
background:none;
text-align:center;
text-transform:none;
text-shadow: #009 0px 0px 10px;
}

h3 hover {
text-shadow: #096 0px 0px 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

}

#base {
color: 9999FF;
background-color: black;
text-align: center;
width: 700px;
height: 400px;
padding: 3px;
border-width: 5px;
border-color: 999999;
position: absolute;
top: 0px;
left: 0px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 1%, #000022 3%, #000000 45%, #000011 65%, #000000 75%, #000022 100%); /* FF3.6+ */
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #002; */
max-width:800px;
max-height:600px;
border-radius: 10px;

-webkit-box-shadow:inset 1px 1px 25px 1px #009;
-moz-box-shadow:inset 1px 1px 25px 1px #009;
box-shadow:inset 1px 1px 25px 1px #009;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 1px;
}


#anchor {
width: 700px;
height: 390px;
overflow: hidden;
}

#content {
text-align:left;
width: 690px;
height: 390px;
overflow: auto;
padding-left:5px;
padding-right:5px;
}


#sidebar {
color: #00CCCC;
background-color: black;
text-align: center;
width: 350px;
height: 230px;
padding: 3px;
border-width: 5px;
border-color: 999999;
position: absolute;
top: 0px;
left: 705px;


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 1%, #000022 3%, #000000 45%, #000011 65%, #000000 75%, #000022 100%); /* FF3.6+ */
-webkit-box-shadow: inset 0px 0px 25px 5px #000;
box-shadow: inset 0px 0px 25px 5px #002; */
max-width:800px;
max-height:600px;
border-radius: 10px;

-webkit-box-shadow:inset 1px 1px 25px 1px #009;
-moz-box-shadow:inset 1px 1px 25px 1px #009;
box-shadow:inset 1px 1px 25px 1px #009;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 1px;

background:url();
background-position: center;
background-color:black;
background-size:80%;
background-repeat: no-repeat;
}

#sbanchor {
width: 350px;
height: 600px;  
overflow: hidden;
}

#sbcontent {
text-align:left;
width: 345px;
height: 245px;
overflow: auto;
padding-left:5px;
padding-right:5px;
font-size:12px;
}    

#sbcover {
text-align:left;
width: 345px;
height: 230px;
overflow: auto;
padding-left:5px;
padding-right:5px;
font-size:12px;

background:url(http://24.media.tumblr.com/2a4560ad6668e9554af13ceaa8beb44f/tumblr_mwpp0feK621rg556io1_500.jpg);
background-position: center;
background-color:black;
background-size:80%;
background-repeat: no-repeat;
opacity:3;

-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.scover:hover {
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
opacity:1;
}


#sbcontent i {
font-size:12px;
}


#sbtrans {
text-align:left;
width: 345px;
height: 230px;
overflow: hidden;
padding-left:5px;
padding-right:5px;
font-size:12px;
background-color: transparent;

-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}


#navigation {
color: 3366FF;
background-color: transparent;
text-align: center;
width: 700px;
height: 60px;
padding: 1px;
border-style: none; /*solid */
border-width: thick;
border-color: #0CC;
position: absolute;
top: 400px;
left: 0px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;
}


#navigation a:link, a:visited {
color: #066;
text-shadow: #096 0px 0px 10px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#navigation a:hover {
color: #F00;
text-shadow: #000 0px 0px 10px;
font-family:'Times new Roman' !important;
font-weight: normal;
font-size:12px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}


</style>



<div id="sidebar">
<div id="sbcover" >
<div id="sbtrans" class="Scover">

Text text text text


</div>
</div>
</div>  

[Jack'Aran]

#content {
top: 350px;
left: 350px;
position: absoulte;
text-align:left;
width: 300px;
height: 280px;
overflow-x: hidden;
overflow-y: auto;
opacity:0;
-webkit-transition: opacity 1s;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}

#content:hover {
background-color: #FFF;
opacity:1;
-webkit-transition: opacity 1s;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}


#cover {
top: 350px;
left: 350px;
position: absoulte;
background-color: white;
width: 300px;
height: 280px;
overflow: hidden;
background-image:url("http://24.media.tumblr.com/2a4560ad6668e9554af13ceaa8beb44f/tumblr_mwpp0feK621rg556io1_500.jpg");
background-attachment:fixed; no-repeat;
background-size:20%;
background-repeat: no-repeat;

-webkit-box-shadow:inset 1px 1px 25px 1px #000;
-moz-box-shadow:inset 1px 1px 25px 1px #000;
box-shadow:inset 1px 1px 25px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


<div id="cover">
<div id="content">
text text
</div>
</div>