SIGMA-010 (Cyclops)

<style type="text/css">
.pfor {display: none;}
BODY { font-family: georgia, serif; font-size: 10px; color: #404040; margin:0px; background-color:#000000;}
body {background-image:url("http://i.picpar.com/y8ib.png"); background-attachment:fixed;}
#profile {border: 0px;}
body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur826.cur), progress !important;}


a:hover {
background-color: #990000;
font-family: OCR A Std;
color: #111111;
transition:all 1s ease-out;
-o-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
opacity: .5;
filter:alpha(opacity=20); -moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}


::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-track {rgba(0,0,0,0.4); border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 10px; rgba(0,0,0,0.5);}
::-webkit-scrollbar-track-piece  {background-color: #000000;}
::-webkit-scrollbar-thumb:vertical {height: 30px;background-color: #990000;}


.maintitle { font-family: Orator Std; font-size: 10px; color: #990000;  background-color: 000000; text-transform:
uppercase; text-align: center; text-shadow: 0px 10px 6px #990000; margin: 1px 1px 1px 1px;}
border-bottom: 0px solid #000000;
}


.Ivano { Table Properties }
table, tr, td { background-color:transparent; border:0;}
table table {
background-color:transparent;
border-left:0px double #000000 ;
border-right:0px double #000000;
 }

table table table  { background-color:transparent; display: inline-table; border:1px solid; }



.ivan_table {
padding:2px;
margin-bottom:5px;
border:1px double ;
-webkit-box-shadow: 7px 7px 5px rgba(19, 4, 0, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(19, 4, 0, 0.75);
box-shadow:         7px 7px 5px rgba(19, 4, 0, 0.75);
}


.Ivano { Font Styles }
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  {
font-family: Palatino Linotype;
font-size: 7pt ;
line-height: 90% ;
text-decoration:none;
}

P { text-align:justify; }
p:first-letter {font-size:10pt;}
p:first-line {font-size:10pt;}


.strong, strong {
font-family:OCR A Std;
font-size:8pt;
}

B, .B2, B2, .B3, B3, .B4, B4 {
font-family:Times New Roman;
font-size:7pt;
text-transform:lowercase;
line-height:100%;
letter-spacing: 0pt;
text-shadow: 1px 1px 1px rgba(153, 0, 0, 0.82);
}




.B3, B3, .B4, B4, .B5, B5 {
display:block;
text-align:center;
}

.B3, B3 {
font-size:9pt;
letter-spacing:1pt;
margin:5px 0px;
}

.B4, B4 {
font-weight:bolder;
margin:10px 0px 5px;
Text-transform:uppercase;
letter-spacing:1pt;
}

.B5, B5 {
font-weight:bolder;
font-size:11pt;
margin:10px 0px 5px;
Text-transform:uppercase;
letter-spacing:1pt;
}


.about{
width:302px;
height:560px;
overflow:auto;
text-align:justify;
margin:5px;
padding:3px;
border:6px double;

}

a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
font-family: 'Special Elite', cursive;
font-size:8pt;
text-align:center;
text-transform:uppercase;
letter-spacing:-1px;
line-height:100%;
display:block;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all  0.6s ease-out;
-ms-transition: all  0.6s ease-out;
-o-transition: all  0.6s ease-out;
transition: all  0.6s ease-out;
margin:0px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

a.first, a.first:link, a.first:active, a.first:visited{
letter-spacing:0pt;
margin:5px 0px;
border-left:10px solid;
border-right:10px solid;

}
a.first:hover {
letter-spacing:-3pt;
border-left:20px solid;
border-right:20px solid;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
-ms-transition: all 1.0s ease-out;
-o-transition: all 1.0s ease-out;
transition: all 1.0s ease-out;
 }
a.second, a.second:link, a.second:active, a.second:visited {
line-height:10px;
height:10px;
font-size:8pt;
letter-spacing:0px;
margin:5px 0px;
border:2px solid;
padding:5px 0px;

}

 a.second:hover {
letter-spacing:8px;
}


.img1, .img2, .img5 {
overflow:hidden;
border:0px;
}
.img1, .img2 {
width:150px;
height:250px;

}
.img2{
width:200px;
}

.img5 {
width:117px;
height:65px;

}

.about3a, .about3b {
width:306px;
height:186px;
overflow:auto;
padding:3px;
border-top:double 6px;
border-bottom:double 6px;

}

.about3a{
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
 border-top-left-radius: 20px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
border-left:double 6px;
border-right: solid 6px;
}

.about2 {
width:150px;
height:170px;
overflow:auto;
margin:5px;
padding:3px;
text-align:justify;
border:6px double;
}


.about4 {
width:360px;
height:100px;
overflow:auto;
margin:5px;
padding:3px;
text-align:justify;
border:6px double;
}


.stats {
width:200px;
height:150px;
overflow:auto;
margin:5px;
padding:2px;
border:2px double;
}


.conn {
width:109px;
height:122px;
overflow:auto;
margin:5px;
padding:3px;
text-align:justify;
border:2px double;
}

.connimg {
width:75px;
height:150px;
overflow:hidden;
}




.Ivan{ Color Palette}

 body { background-color:34282C ;  }

.Ivan_table   {background-color:000000; border-color:800517; }
.about, .about2, .about3a, .about3b, .about4, .copyright, .stats, .conn  {background-color: #080808; border-color:transparent; }


.colorize { background-color:000000;}


a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p  { color:990000; }



B {color:666666; }
.B2, B2, .B3, B3{color:ffffff; }
.B5, B5, .B4, B4 {color:333333; }
.strong, strong {color:666666; }


a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {color:C11B17;background-color:080808; border-color:000000;}

 a.first:hover,  a.second:hover {color:ffffff; }


small, .h3, h3 { color: C11B17 ; background-color:111111; border-color: 9e9e9e; }

</style>


<DIV style="position: fixed; top:10px; left:400px;">
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:200px; height:400px;">

<div class="maintitle">History</div>

<div class="about">

<font face="Consolas"color="#8C001A"><small>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</br>


<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</br>


<BR>For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  I code for ALL sites.  Not every website will allow headers to be placed as h1 etc between < these > brackets.  For that reason, I turn them into font classes with a period in front and script them as I have done below.  If you are on a website that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels OR just leave them as they are.  They will work for you either way.  SEE THE INSTRUCTIONS FOR THIS LAYOUT FOR SPECIFIC DETAILS AND EXAMPLES.</small>
<BR><BR></font>

</div>
</td></tr></table></td></tr></table>

</DIV>


<DIV style="position:fixed; top:190px; left:00px;">
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:200px; ">

<table><tr>

<td valign="top">

<div class="maintitle">Personality</div>

<div class="about2">

<font face="Consolas"color="#C8A2C8"><small>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</br>

<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</br>

</font>

</div>

<font class="b4"><i>"Quote Here"</i></font>

<td valign="top">

<img class="img2" src="http://static.tumblr.com/53f32effc12d4eb565b27de95d5054e3/ojunfe3/vc4mjnnq4/tumblr_static_tumblr_mjml6zkc9u1qcumdoo1_500.png">

</td></tr></table>
</DIV>

<DIV style="position: Fixed; top:0px; left:735px;height:25px"><
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0">
<td valign="top" align="center" style="width:350px; ">

<div class="maintitle">Powers/Abilities</div>

<table><tr><td valign="top">
<div class="about3a">

<font face="Arial"color="#8C001A"><small>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</font><br>

<center><br> <img src="http://i.picpar.com/k4kb.jpg" width="290"height="100"></center>
<td>
</div></td></tr></table>


</td></tr></table></td></tr></table>
</DIV>

<DIV style="position: fixed; top:2px; left:2px;">
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" style="width:386px; height:140px; ">


<div class="maintitle">Statistical Information</div>

<div class="stats">

<p></p><font class="strong">Status</font>
 <font face="Arial"color="#C8A2C8"><small>
<BR><b>NAME:</b> Input info
<BR><b>NICKNAMES:</b> Input info
<BR><b>ALIASES:</b> Input info
<BR><b>DATE OF BIRTH:</b> Input info

<BR><b>Race:</b> Input info
<BR><b>HAIR COLOR:</b> Input info
<BR><b>EYE COLOR:</b> Input info
<BR><b>HEIGHT:</b> Input info
<BR><b>WEIGHT:</b> Input info


<p></p><font class="strong">Relationships</font>

<BR><b>SEXUAL ORIENTATION:</b> Input info
<BR><b>RELATIONSHIP STATUS:</b> Input info


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


</td></tr></table></td></tr></table>
</DIV>

<DIV style="position: fixed; top:24px; left:225px;"><img src="https://40.media.tumblr.com/99af940857ab58b54a094a6e244f603d/tumblr_nh41zv4QwG1skf43ko1_500.jpg" width="160"height="153"><br></DIV>

<DIV style="position: fixed; top:460px; left:3px;">
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:450x; height:100px;">

<div class="maintitle">Associates</div>

<div class="about4">
 <font face="Consolas"color="#8C001A"><small>
<a class="second" href="/FriendID"><font face=" OCR A Std">Name</font></a>
<img align="left" src="http://i40.tinypic.com/2d9wc2d.jpg"> This is a very simple pic/text side by side/wrap around image type of paragraph; however, if you don't put enough text in here to meet the end of the image, the next name/para MAY move to align beside this table instead of going right beneath it. You can resolve this very easily by adding additional text or tossing in a few page breaks.  Just test it out if you need to.
 <br>
<p></p><a class="second" href="/FriendID"><font face=" OCR A Std">Name</font></a>
<img align="left" src="http://i40.tinypic.com/2d9wc2d.jpg">  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<p></p><a class="second" href="/FriendID"><font face=" OCR A Std">Name</font></a>
<img align="left" src="http://i40.tinypic.com/2d9wc2d.jpg">  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<p></p><a class="second" href="/FriendID"><font face=" OCR A Std">Name</font></a>
<img align="left" src="http://i40.tinypic.com/2d9wc2d.jpg">  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<p></p><a class="second" href="/FriendID"><font face=" OCR A Std">Name</font></a>
<img align="left" src="http://i40.tinypic.com/2d9wc2d.jpg">  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 </font>

</div>

</td></tr></table></td></tr></table>
</DIV>

<DIV style="position: fixed; top:235px; left:745px;">
<table class="Ivan_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:150px; display:block; word-wrap:break-word">

<div class="maintitle">OOC/CREDIT</div>

<table><tr><td>

<a href="/FriendID">
<img class="connimg" src="http://static.comicvine.com/uploads/original/7/73849/1657542-cyclops_red_glare.jpg">
</a>

</td><td><div class="conn">

<font face="Arial"color="#C8A2C8"><small>Add the friend id number where indicated above and below for the connection so that the pics when clicked will link to that person's profile. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis no</font>

</div></td><td>


</td></tr></table>


</td></tr></table></td></tr></table>