Mat Drake

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Raleway:400,900|Playfair+Display:400,700italic|Marck+Script|Oswald|Dynalight|Roboto+Condensed:400,700);

/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */

.vicarious { Structure }


body {
background-color: 202020;
background-image:url( );
background-repeat:repeat;
background-attachment:fixed;
background-position:center center;
}

table, tr, td {background-color:transparent;}

.viclike2meet_table, .vicinterests_table, #sidebar {
visibility:visible;
z-index:2;
position:absolute;
top:0%;
left:50%;
border:0px solid;
margin-top:0px;
height:auto;
overflow:hidden;
display:inline-block;
background-color:transparent;
}

.viclike2meet_table {  width:350px;height:auto;margin-left:-160px; }
.viclike2meet_table tr { margin:0px;  }
.viclike2meet_table td { margin:0px; max-width:350px; overflow:hidden;   }

.vicinterests_table{ width:425px; height:auto;margin-left:195px;}
.vicinterests_table tr { margin:0px; }
.vicinterests_table td { margin:0px; max-width:425px; overflow:hidden;  }


.vic_table {
padding:0px;
margin:0px;
width:100%;
margin-bottom:4px;
border:0px solid;
background-color:d7d7d7;
border-collapse: collapse; /* 'cellspacing' equivalent */
overflow:hidden;
}

.vic_table tr { margin:0px; }
.vic_table td { margin:0px; width:100%; text-align:center; padding: 0; /* 'cellpadding' equivalent */ }


 .vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid #000000;background-color:transparent;}
::-webkit-scrollbar-thumb {border: 1px solid #000000;background-color:ffffff;}

.vicarious { text }

table, tr, td, li, p, div, .text, .btext, a, b, i {
font-family:tahoma;
font-size:7pt;
line-height:100%;
color: 4e4e4e;
padding:0px;
margin:0px;
text-decoration:none;
text-transform:none;
}

p {text-align:justify; margin-top: 5px;text-indent:10px; }
p:first-line {  }
p:first-letter { font-size: 9pt; }


b {
font-size:8pt;
text-transform:uppercase;
font-family: 'Roboto Condensed', sans-serif;
color: 000000;
}

i {
font-size:10pt;
color: 424242;
font-family: 'Dynalight', cursive;
}

.u, u {
color: 202020;
text-decoration:underline;
}

.strike, strike {
color: 4e4e4e ;
text-decoration:line-through;
letter-spacing:1pt;
}

.strong, strong {
font-family:courier new;
font-size: 9pt;
text-transform:uppercase;
color: 454545;
font-weight:900;
}

em {
font-family:brush script mt;
font-size:11pt;
color: 4b4b4b;
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big  {
padding:0px;
margin:0px;
}


.blockquote {
height:auto;
display:block;
text-align:justify;
margin:5px 5px 5px 10px;
padding: 5px 5px 5px 10px;
border-left:10px double #151515;
background-color:eaeaea;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
 border-top-left-radius: 90px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}


.cite {font-size:0px; color:transparent;display:block; height:0px;}


.vicarious { Divs }

/* add*/
#add {
visibility:visible;
z-index:2000;
position:fixed;
bottom:0%;
left:0%;
margin-bottom:20px;
margin-left:20px;
background-color:transparent;
}

#add a {
text-transform:none;
text-decoration:none;
height:25px;
width:25px;
line-height:25px;
font-size:18pt;
overflow:hidden;
color:ffffff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

/* SIDEBAR */

#sidebar {
position:fixed;
z-index:10000;
margin-top:0px;
margin-left:-605px;
width:440px;
height:100%;
background-color:transparent;
}

#sidebar .sidebarB {
position:absolute;
margin-top:100px;
margin-left:0px;
width:430px;
height:300px;
background-color: eaeaea;
border:5px solid #d6d6d6;
}

.sidebarB .def {
z-index:10000;
position:absolute;
margin-top:5px;
margin-left:25px;
width:190px;
height:190px;
background-color:transparent;
transform: rotate(345deg);
-webkit-transform: rotate(345deg);
-moz-transform: rotate(345deg);
-o-transform: rotate(345deg);
-ms-transform: rotate(345deg);
transition:All 1s linear 0s;
-webkit-transition:All 1s linear 0s;
-moz-transition:All 1s linear 0s;
-o-transition:All 1s linear 0s;
}

.sidebarB:hover .def {
transition:All 1s linear 0s;
-webkit-transition:All 1s linear 0s;
-moz-transition:All 1s linear 0s;
-o-transition:All 1s linear 0s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

.def .linx {
z-index:2;
position:absolute;
margin-top:0px;
margin-left:0px;
width:190px;
height:190px;
background-color:d7d7d7;
}

.def a {
letter-spacing:0pt;
height:34px;
line-height:34px;
display:block;
outline:dashed;
outline-offset:-6px;
outline-width:1px;
text-transform:uppercase;
text-decoration:none;
text-align:center;
color:151515;
background-color: e6e6e6;
border:1px solid #202020;
margin:2px;
overflow:hidden;
font-family: 'Raleway', sans-serif;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

.def a:hover {
color:b4b4b4;
letter-spacing:2pt;
background-color:e7e7e7;
}

.def1 {
opacity:1;
z-index:3;
position:absolute;
margin-top:0px;
margin-left:0px;
width:180px;
height:180px;
background-size:180px 180px;
border:5px solid #454545;
transition:All 1s linear 0s;
-webkit-transition:All 1s linear 0s;
-moz-transition:All 1s linear 0s;
-o-transition:All 1s linear 0s;
transform-origin: top left;
transform-style: preserve-3D;
transform: rotate(0deg);
}

.def:hover .def1 {
opacity:0;
transform: rotate(-180deg);
transform-origin:-0px -0px;
-ms-transform: rotate(-180deg);
-ms-transform-origin:-0px -0px;
-webkit-transform: rotate(-180deg);
-webkit-transform-origin:-0px -0px;
-moz-transform: rotate(-180deg);
-moz-transform-origin:-0px -0px;
-o-transform: rotate(-180deg);
-o-transform-origin:-0px -0px;
}

.sidebarB .quote1 {
position:absolute;
margin-top:245px;
margin-left:5px;
width:400px;
height:30px;
line-height:30px;
outline:solid;
outline-offset:-2px;
outline-width:1px;
 color:ffffff;
background-color: 151515;
display:block;
overflow:hidden;
text-align:center;
padding:5px 10px;
transition:All 1.4s linear .7s;
-webkit-transition:All 1.4s linear .7s;
-moz-transition:All 1.4s linear .7s;
-o-transition:All 1.4s linear .7s;
}

.sidebarB:hover .quote1 {
font-size:10pt;
color: e0e0e0;
background-color: 202020;
width:170px;
height:60px;
line-height:100%;
margin-left:25px;
margin-top:205px;
transition:All 1s linear 0s;
-webkit-transition:All 1s linear 0s;
-moz-transition:All 1s linear 0s;
-o-transition:All 1s linear 0s;
}

.sidebarB .title {
font-family: 'Playfair Display', serif;
font-style:italic;
font-size:37px;
position:absolute;
margin-top:5px;
margin-left:240px;
text-align:center;
display:block;
width:170px;
height:50px;
line-height:50px;
overflow:hidden;
color:151515;
background-color:transparent;
}

.sidebarB .stuff {
position:absolute;
margin-top:60px;
margin-left:240px;
width:170px;
height:215px;
overflow:hidden;
background-color:transparent;
}

.sidebarB .icon {
display:block;
text-align:center;
opacity:1;
position:absolute;
margin-top:0px;
margin-left:0px;
width:170px;
height:125px;
font-size:100px;
line-height:125px;
color: ffffff;
text-shadow: 4px 2px 2px rgba(0, 0, 0, 1);
background-color:transparent;
transition:All 1.4s ease-in-out 0s;
-webkit-transition:All 1.4s ease-in-out 0s;
-moz-transition:All 1.4s ease-in-out 0s;
-o-transition:All 1.4s ease-in-out 0s;
}

.sidebarB:hover .icon {
font-size:2pt;
height:10px;
margin-top:-125px;
opacity:0;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

.sidebarB .info {
position:absolute;
margin-top:0px;
margin-left:0px;
width:145px;
padding:10px;
height:170px;
overflow:hidden;
opacity:0;
transition: all 1s ease-out 0s;
-o-transition-transition: all 1s ease-out 0s;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
outline:dashed;
outline-offset:-6px;
outline-width:1px;
text-align:center;
background-color: 151515;
color: e6e6e6;
 -webkit-box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    4px 4px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow:         4px 4px 2px 0px rgba(0, 0, 0, 0.75);
}

.sidebarB:hover .info {
opacity:1;
margin-top:20px;
transition: all 1s ease-out 1s;
-o-transition-transition: all 1s ease-out 1s;
-webkit-transition: all 1s ease-out 1s;
-moz-transition: all 1s ease-out;
}

.sidebarB .strong, .sidebarB strong {
color: ffffff;
display:block;
text-align:center;
padding:2px;
line-height:100%;
margin-top:5px;
}


/* INTERESTS - TABLE 1 */

#INTtable1 {
width:425px;
height:500px;
background-color:transparent;
}

#INTtable1 .line1, #INTtable1 .line2, #INTtable1 .line3, #INTtable1 .line4 {
position:absolute;
transition:All 1s linear;
-webkit-transition:All 1s linear;
-moz-transition:All 1s linear;
-o-transition:All 1s linear;
background-color:transparent;
border-style:solid;
}

#INTtable1 .line1, #INTtable1 .line2 { border-width:5 5 0 0; }
#INTtable1 .line3, #INTtable1 .line4 { border-width:0 0 5 5; }
#INTtable1 .line1, #INTtable1 .line3 { height:145px; border-color:#fefefe; }
#INTtable1 .line2, #INTtable1 .line4 { height:245px; border-color:#454545; }

#INTtable1 .line1 { width:110px; margin:80px 0px 0px 305px;}
#INTtable1 .line2 { width:100px; margin:90px 0px 0px 305px;}
#INTtable1 .line3 { width:135px; margin:335px 0px 0px 5px;}
#INTtable1 .line4 { width:125px; margin:225px 0px 0px 15px;}

#INTtable1:hover .line1 { height:400px; }
#INTtable1:hover .line2 { height:390px; }
#INTtable1:hover .line3, #INTtable1:hover .line4  { margin-top:5px; }
#INTtable1:hover .line3 { height:475px; }
#INTtable1:hover .line4 { height:465px; }

#INTtable1 .about {
background-color: eaeaea;
width:365px;
padding:0px 5px;
height:365px;
margin:100px 0px 0px 25px;
position:absolute;
text-align:justify;
overflow:auto;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

#INTtable1:hover .about {
background-color:ffffff;
}

#INTtable1 .quote {
opacity:1;
z-index:1;
font-family: 'Raleway', sans-serif;
font-size:7pt;
letter-spacing:0pt;
width:245px;
height:20px;
line-height:20px;
margin:470px 0px 0px 150px;
position:absolute;
text-align:left;
padding:0px;
letter-spacing:1pt;
text-transform:uppercase;
color: 4a4a4a;
overflow:hidden;
display:block;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

#INTtable1:hover .quote {
opacity:0;
}

#INTtable1 .music {
z-index:2;
opacity:0;
width:245px;
height:20px;
margin:470px 0px 0px 150px;
position:absolute;
padding:0px;
overflow:hidden;
display:block;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

#INTtable1:hover .music { opacity:1;}
#INTtable1 .xxx  {z-index:2;opacity:1;}
#INTtable1:hover .xxx {opacity:0;}
#INTtable1 .xxy  {z-index:1;opacity:0;}
#INTtable1:hover .xxy {opacity:1;}

#INTtable1 .xxx, #INTtable1 .xxy {
background-color:transparent;
width:280px;
height:100px;
position:absolute;
margin:5px 0px 0px 25px;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

#INTtable1 img {
border-width:5px;
border-style:solid;
border-color:#151515;
height:80px;
width:80px;
display:inline-block;
}

/* INTERESTS - TABLE 2 */

#INTtable2 {
background-color:#fefefe;
width:425px;
height:424px;
overflow:hidden;
}

.vicbox {
width: 207px;
height: 207px;
margin: 0px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
}

.vicbox .mask, .vicbox .content {
width: 207px;
height: 207px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
opacity:0;
transition: all 0.3s ease-in 0.4s;
}

.vicbox:hover .mask {
opacity:1;
transition-delay: 0s;
}

.vicbox img {
width:207px;
height:207px;
overflow:hidden;
display: block;
position: relative;
transition: all 0.4s ease-in-out 0.5s;
}

.vicbox:hover img {
transition-delay: 0s;
}

.vicbox .h2, .vicbox h2 {
font-family: 'Oswald', sans-serif;
display:block;
text-transform: uppercase;
color: ffffff;
text-align: center;
position: relative;
font-size: 10pt;
line-height:100%;
padding: 5px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.1s;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 10px 0px 10px;
}

.vicbox:hover .h2, .vicbox:hover h2 {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
}

.vicbox .stats {
position: relative;
color: ffffff;
padding: 10px 5px 5px 5px;
text-align: left;
overflow:auto;
height:140px;
margin:0px 10px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
opacity:0;
transform: scale(10);
transition: all 0.3s ease-in-out 0.2s;
}

.stats p {
color:ffffff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.stats b {
font-size:8pt;
color: e1e1e1;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.vicbox:hover .stats {
opacity:1;
transform: scale(1);
transition-delay: 0.2s;
}


/* INTERESTS - TABLE 3 */

#INTtable3 {
width:425px;
height:350px;
overflow:hidden;
}

#INTtable3 .title1 {
z-index:7;
font-size:40pt;
width:415px;
height:50px;
line-height:50px;
color:fefefe;
text-align:left;
padding:10px 5px 80px 5px;
border-bottom:2px solid #d7d7d7;
background-color:151515;
margin-top:0px;
margin-left:0px;
position:absolute;
display:block;
overflow:hidden;
-webkit-box-shadow: 0px 5px 0px 0px rgba(181, 181, 181, 0.75);
-moz-box-shadow:    0px 5px 0px 0px rgba(181, 181, 181, 0.75);
box-shadow:         0px 5px 0px 0px rgba(181, 181, 181, 0.75);
font-family: 'Dynalight', cursive;
text-transform:none;
letter-spacing:1pt;
}

#INTtable3 .title2 {
z-index:8;
font-size:6pt;
width:205px;
height:10px;
line-height:10px;
color:151515;
text-align:right;
padding:2px 215px 2px 5px;
background-color:fefefe;
position:absolute;
margin-top:60px;
margin-left:0px;
display:block;
overflow:hidden;
text-transform:uppercase;
font-family: 'Raleway', sans-serif;
letter-spacing:3pt;
}

#INTtable3 .pic {
z-index:9;
width:100px;
height:100px;
background-size:100px 100px;
position:absolute;
margin-top:20px;
margin-left:300px;
overflow:none;
border:5px solid #fefefe;
-webkit-border-radius: 360px;
-moz-border-radius: 360px;
border-radius: 360px;
}

#INTtable3 .about {
z-index:6;
width:397px;
height:140px;
position:absolute;
margin-top:145px;
margin-left:5px;
padding:5px;
overflow:auto;
border-width:0px 4px 0px 4px;
border-style:double;
border-color:fefefe;
background-color: eeeeee;
}

#INTtable3 .quote {
z-index:7;
width:405px;
height:35px;
line-height:100%;
padding:10px;
position:absolute;
margin-top:295px;
margin-left:0px;
overflow:auto;
color: eeeeee;
display:block;
text-align:center;
background-color:151515;
font-family: 'Oswald', sans-serif;
font-size:9pt;
overflow:hidden;
}


/* INTERESTS - TABLE 4 */

#INTtable4 {
width:405px;
height:168px;
overflow:hidden;
border:5px solid #454545;
padding:5px;
overflow:auto;
}


/* LIKE TO MEET - TABLE 1 */

#LK2MEETtable1 {
width:350px;
height:500px;
overflow:hidden;
}

#LK2MEETtable1 .namefield {
background-color: transparent;
width:502px;
height:75px;
position:absolute;
margin-left:60px;
margin-top:212px;
transform: rotate(90deg) ;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
display:block;
overflow:hidden;
}

#LK2MEETtable1 .h1, #LK2MEETtable1 h1 {
margin:0px;
text-align:left;
padding-left:15px;
height:55px;
line-height:55px;
font-size:55px;
font-family: 'Oswald', sans-serif;
color:0f0f0f;
border-bottom:20px solid #fefefe;
display:block;
overflow:hidden;
}

#LK2MEETtable1 .default, #LK2MEETtable1 .innerbox {
position:absolute;
transition:All 1s linear 0s;
-webkit-transition:All 1s linear 0s;
-moz-transition:All 1s linear 0s;
-o-transition:All 1s linear 0s;
}

#LK2MEETtable1 .default {
margin:0px 0px 0px 0px;
overflow:none;
opacity:1;
z-index:1;
width:275px;
height:500px;
background-size:275px 500px;
}

#LK2MEETtable1:hover .default {
opacity:.2;
}

#LK2MEETtable1 .innerbox {
overflow:hidden;
opacity:0;
z-index:2;
width:200px;
height:380px;
padding:10px;
margin:0px 0px 0px 25px;
border:1px solid #c2b0ad;
background-color:e7e7e7;
outline:dashed;
outline-offset:-6px;
outline-width:1px;
 -webkit-box-shadow: 4px 4px 2px 0px rgba(176, 176, 176, 0.75);
-moz-box-shadow:    4px 4px 2px 0px rgba(176, 176, 176, 0.75);
box-shadow:         4px 4px 2px 0px rgba(176, 176, 176, 0.75);
}

.innerbox .text {
width:180px;
margin:5px;
padding:5px;
height:360px;
overflow:auto;
}

 .innerbox p {}

#LK2MEETtable1:hover .innerbox {
overflow:auto;
opacity:1;
margin:50px 0px 0px 25px;
}

/* LIKE TO MEET - TABLE 2 */

#LK2MEETtable2 {
z-index:7;
width:330px;
height:330px;
overflow:hidden;
outline:solid;
outline-offset:-15px;
outline-width:5px;
outline-color:454545;
border:5px solid #eeeeee;
margin:5px;
}

#LK2MEETtable2 .about {
z-index:8;
width:290px;
height:240px;
margin-top:15px;
margin-left:15px;
padding:5px;
position:absolute;
overflow:auto;
}

#LK2MEETtable2 img {
width:100px;
height:100px;
overflow:hidden;
float:left;
padding:10px;
margin:2px;
background-color:454545;
outline:dotted;
outline-offset:-6px;
outline-width:1px;
outline-color:ffffff;
}

#LK2MEETtable2 .text {
z-index:9;
position:absolute;
width:330px;
height:30px;
margin-top:275px;
margin-left:0px;
overflow:hidden;
background-color:151515;
transition:All .4s linear 2s;
-webkit-transition:All .4s linear 2s;
-moz-transition:All .4s linear 2s;
-o-transition:All .4s linear 2s;
}

#LK2MEETtable2 .text:hover {
height:330px;
margin-top:0px;
transition:All .4s linear 0s;
-webkit-transition:All .4s linear 0s;
-moz-transition:All .4s linear 0s;
-o-transition:All .4s linear 0s;
}

.text  .title {
position:absolute;
width:320px;
height:30px;
line-height:30px;
font-size:12pt;
color:ffffff;
padding-right:10px;
display:block;
text-align:right;
margin-top:0px;
margin-left:0px;
overflow:hidden;
text-transform:uppercase;
}

.text .additional {
position:absolute;
margin-top:40px;
margin-left:10px;
width:270px;
height:210px;
padding:10px;
background-color:d7d7d7;
overflow:auto;
opacity:0;
border:double #fefefe 10px;
transition:All .8s linear 0s;
-webkit-transition:All .8s linear 0s;
-moz-transition:All .8s linear 0s;
-o-transition:All .8s linear 0s;
}

.text:hover .additional {
opacity:1;
margin-top:50px;
transition:All .8s linear 1s;
-webkit-transition:All .8s linear 1s;
-moz-transition:All .8s linear 1s;
-o-transition:All .8s linear 1s;
}


/* LIKE TO MEET - TABLE 3 */

#LK2MEETtable3 {
width:350px;
height:170px;
overflow:hidden;
outline:groove;
outline-offset:-20px;
outline-width:1px;
background-color: ffffff;
color: 151515;
}


#LK2MEETtable3 .shorty {
width:290px;
height:100px;
text-align:justify;
position:auto;
padding:5px;
margin:25px 0px 0px 25px;
overflow:auto;
}

.shorty p { color: 151515;  text-indent:0px;}
.shorty p:first-letter { font-size: 7pt; }


#LK2MEETtable3 .one, #LK2MEETtable3 one  {
display:block;
background-color:151515;
color:fefefe;
padding:5px;
line-height:35px;
height:35px;
width:35px;
font-size:16pt;
font-family: 'Raleway', sans-serif;
outline:dashed;
outline-offset:-6px;
outline-width:1px;
float:left;
margin:2px;
text-align:center;
}


/* LIKE TO MEET - Connections Tables */

#LK2MEETconnTables {
width:350px;
height:110px;
overflow:hidden;
border-bottom:2px solid #d7d7d7;
-webkit-box-shadow: 0px 5px 0px 0px rgba(181, 181, 181, 0.75);
-moz-box-shadow:    0px 5px 0px 0px rgba(181, 181, 181, 0.75);
box-shadow:         0px 5px 0px 0px rgba(181, 181, 181, 0.75);
}

#LK2MEETconnTables .title1, #LK2MEETconnTables .title1, #LK2MEETconnTables .pic, #LK2MEETconnTables .conn {
transition:All .6s linear 0s;
-webkit-transition:All .6s linear 0s;
-moz-transition:All .6s linear 0s;
-o-transition:All .6s linear 0s;
}

#LK2MEETconnTables .title1 {
z-index:7;
font-size:16pt;
width:340px;
height:30px;
line-height:30px;
color:000000;
text-align:right;
padding:60px 5px 10px 5px;
margin-top:0px;
margin-left:0px;
position:absolute;
display:block;
overflow:hidden;
font-family: 'Raleway', sans-serif;
text-transform:none;
letter-spacing:1pt;
}

#LK2MEETconnTables:hover .title1 {
margin-left:-360px;
opacity:0;
}

#LK2MEETconnTables .title2 {
z-index:8;
font-size:6pt;
width:230px;
height:10px;
line-height:10px;
color:ffffff;
text-align:left;
padding:2px 5px 2px 115px;
background-color:454545;
position:absolute;
margin-top:40px;
margin-left:0px;
display:block;
overflow:hidden;
text-transform:uppercase;
font-family: 'Raleway', sans-serif;
letter-spacing:3pt;
}

#LK2MEETconnTables:hover .title2 {
margin-left:360px;
opacity:0;
transition:All .6s linear .6s;
-webkit-transition:All .6s linear .6s;
-moz-transition:All .6s linear .6s;
-o-transition:All .6s linear .6s;
}

#LK2MEETconnTables .pic {
z-index:9;
width:80px;
height:80px;
background-size:80px 80px;
position:absolute;
margin-top:10px;
margin-left:25px;
overflow:none;
border:5px solid #454545;
}

#LK2MEETconnTables:hover .pic  {
margin-left:245px;
opacity:1;
transition:All .6s linear 1.2s;
-webkit-transition:All .6s linear 1.2s;
-moz-transition:All .6s linear 1.2s;
-o-transition:All .6s linear 1.2s;
}

#LK2MEETconnTables .conn {
opacity:0;
z-index:10;
font-size:16pt;
width:0px;
height:80px;
padding:5px;
margin-top:10px;
margin-left:25px;
position:absolute;
overflow:hidden;
background-color: ffffff;
font-family:arial narrow;

}

.conn p {;font-family:arial narrow;}

#LK2MEETconnTables:hover .conn {
width:200px;
opacity:1;
overflow:auto;
transition:All .6s linear 1.2s;
-webkit-transition:All .6s linear 1.2s;
-moz-transition:All .6s linear 1.2s;
-o-transition:All .6s linear 1.2s;
}

/* LIKE TO MEET - Connections Links*/

#LK2MEETlinksTable {
background-color: d7d7d7;
width:350px;
height:auto;
overflow:hidden;
}

#LK2MEETlinksTable .left, #LK2MEETlinksTable .right {
width:48%;
overflow:auto;
height:95px;
}

#LK2MEETlinksTable .left { float:left;}
#LK2MEETlinksTable .right { float:right; }

#LK2MEETlinksTable a {
background-color:151515;
color:ffffff;
font-size:7pt;
display:block;
text-align:center;
height:17px;
line-height:17px;
margin-bottom:2px;
font-family: 'Roboto Condensed', sans-serif;
outline:solid;
outline-offset:-3px;
outline-width:1px;
text-transform;uppercase;
text-decoration:none;
letter-spacing:0pt;
transition:All .6s linear 0s;
-webkit-transition:All .6s linear 0s;
-moz-transition:All .6s linear 0s;
-o-transition:All .6s linear 0s;
}

#LK2MEETlinksTable a:hover {
background-color: fefefe;
color: 151515;
text-decoration:line-through;
letter-spacing:2pt;
}

 .vicarious{ Hide Codes }
.profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups,  .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
table table table table td {width:0px;}
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}
table div {display:none;}
table table div {display:block;}
.clearfix {display:none !important;position:absolute!important;}
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
.profileInfo tr tr td { visibility:hidden; }
.profileInfo td.text { visibility:visible; }
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
</style></td></tr></table><table style="display:none"><tr><td>






-----------------------------LIKE TO MEET-------------------------



</td></tr></table></td></tr></table><table class="viclike2meet_table"><tr><td valign="top" align="center"><table><tr><td>

<font class="cite">
The above table code must remain at the top.  FULL tables below can be rearranged.

***Image Sizing Instructions***
This layout will code image sizes for you.  For the sake of simplicity you may make all photos 250px width by 250px height EXCEPT the 'default' photo in this section. The tall 'default' image is 275px width by 500px height.
</font>



</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETtable1"><div class="namefield">

<font class="h1">Mathias
<font color="b0b0b0">Drake

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

<div class="default" style="background-image:url(http://i.imgur.com/l6XhbpM.jpg);">

</div><div class="innerbox"><div class="text">
<center>
<p><em>LIKES</em>
<br>Women
<br>Drinking
<br>Hunting
<br>Working on cars

<p><em>DISLIKES</em>
<br>Rude bastards
<br>Liars
<br>The taste of Rum
<br>
</center>
</div></div></div>



</td></tr></table><table class="vic_table"><tr><td>


<div id="LK2MEETtable2">

<div class="about">

<p><img src="http://i.imgur.com/HgpAhgB.jpg"> Reserved spot for his mate

</div>


<div class="text"><div class="title">

Something goes here ▼

</div><div class="additional">

<p>Reserved spot for any children he has here.


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




</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETtable3"><div class="shorty">

<p><font class="one">A</font> something will go here when I feel like it.

</div></div>


</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETconnTables">

<div class="title1">Connection One</div>
<div class="title2">Short Quote</div>

<a href="/#">
<div class="pic" style="background-image:url(http://i.imgur.com/59Ni5qu.jpg);">
</div></a>


<div class="conn">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div></div>



</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETconnTables">

<div class="title1">Connection Two</div>
<div class="title2">Short Quote</div>

<a href="/#">
<div class="pic" style="background-image:url(http://i.imgur.com/59Ni5qu.jpg);">
</div></a>


<div class="conn">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div></div>


</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETconnTables">

<div class="title1">Connection Three</div>
<div class="title2">Short Quote</div>

<a href="/#">
<div class="pic" style="background-image:url(http://i.imgur.com/59Ni5qu.jpg);">
</div></a>


<div class="conn">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div></div>

</td></tr></table><table class="vic_table"><tr><td>

<div id="LK2MEETlinksTable"><div class="left">

<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>

</div><div class="right">

<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>
<a href="/#">Connection Name</a>

</div></div>
-----------------------------INTERESTS-----------------------------


 </td></tr></table></td></tr></table><table class="vicinterests_table"><tr><td valign="top" align="center"><table><tr><td>

<font class="cite">
The above table code must remain at the top.  FULL tables below can be rearranged.
</font>

</td></tr></table><table class="vic_table"><tr><td>


<div id="INTtable1">

<div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="line4"></div>


<div class="xxx">

<img src="http://i.imgur.com/SPhO0WQ.jpg">
<img src="http://i.imgur.com/0UVZ4VR.jpg">
<img src="http://i.imgur.com/F7ws4TA.jpg">


</div><div class="xxy">

<img src="http://i.imgur.com/auXDR5E.jpg">
<img src="http://i.imgur.com/0vbfv91.jpg">
<img src="http://i.imgur.com/Xn2mIju.jpg?1">

</div><div class="about">

<p>Born during the war between the Grecians and the Persians and what is now known as Russia, Mathias or Mat grew up in a middle class family. Not having everything he might have wanted but was content enough with what he had. Not knowing his father and his mother not really speaking of him much but he always wondered who and where he was.

<font class="blockquote">
Around the time that he was old enough to understand his mother revealed that his family was not normal. But one of a blood of wolves. Werewolves. Having to be told before his first turning this was a shock to him and even though just finding out he was able to take on his first full moon transformation and succeed without subcoming to madness like most that was unable to accept their fate.
</font>

<p>Transversing through life becoming a soldier, worker, or anything else that may help him survive for the decades to come he started to track down his life and learn of his origins. Finding relitives all over the globe he found that he came from a long line of aristocrats that were rulers, slave owners, and some just down right cold blooded killers. With this revalation he found that he was thankful that his mother raised him and his sisters well away from this life. He was a better man for it and more honorable and respectful toward others. With each new years he moved from one place to another and finally settling down even though it wouldn't be for long he was still a nomad.

<p>Will add more later.


</div><div class="quote">

I shall live by passion and not by law

</div><div class="music">





</div></div>

<font class="cite">You will note a line of code that starts with param name="wmode" above.  The normal player that you add from mp3.flash does not contain this.  If you are replacing the full player, make sure to add it into your code.  Firefox can be buggy with flash players. This will keep it hidden until it's hovered over.</font>



</td></tr></table><table class="vic_table"><tr><td>

<div id="INTtable2"><div class="vicbox" style="position:absolute; margin-top:0px; margin-left:0px; ">

<img src="http://i.imgur.com/nkLdC2X.jpg?1">

<div class="mask">

<font class="h2">Legal & Physical</font>

<div class="stats">
<b>NAME:</b> Mathias Drake
<BR><b>NICKNAMES:</b> Mat
<BR><b>DATE OF BIRTH:</b> 5th Century BC
<BR><b>AGE:</b> Looks 30
<BR><b>CURRENT RESIDENCE:</b> Off the grid
<BR><b>SPECIES:</b> Werewolf
<BR><b>HAIR COLOR:</b> Black
<BR><b>EYE COLOR:</b> Brown / Blue with contacts
<BR><b>HEIGHT:</b> 6'5"
<BR><b>WEIGHT:</b> 210lbs
<BR><b>BIRTHMARKS/SCARS:</b> Many scars

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

<div class="vicbox" style="position:absolute; margin-top:0px; margin-left:218px;">

<img src="http://i.imgur.com/f9N2kbE.jpg">

<div class="mask">

<font class="h2">Family & Relationships</font>

<div class="stats">
<BR><b>MOTHER:</b> Martha
<BR><b>FATHER:</b> No clue
<BR><b>SISTER(S):</b> A sister and Step sister
<BR><b>BROTHER(S):</b> None
<BR><b>Other Family:</b> None
<BR>
<BR><b>STATUS:</b> Single
<BR><b>ORIENTATION:</b> Women sexual
<BR><b>CURRENT:</b> None
<BR><b>FORMER:</b> None


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


<div class="vicbox" style="position:absolute; margin-top:217px; margin-left:0px;">

<img src="http://i.imgur.com/aKurNSo.jpg">

<div class="mask">

<font class="h2">Education & Employment</font>

<div class="stats">

<br><b>OCCUPATION:</b> Anything
<BR><b>SKILLSET:</b> Jack of all trades


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

<div class="vicbox" style="position:absolute; margin-top:217px; margin-left:218px;">

<img src="http://i.imgur.com/PDPf6pR.jpg">

<div class="mask">

<font class="h2">Personality</font>

<div class="stats">
<b>Traits</b>
<br>☆ Rough, Outspoken, Thinker.
<br>☆ Honorable, Loving (To mate only) Trusting.
<br>☆ Good around computers, Excellent Builder.
<br>☆ Simple magic, Great with kids and babies, Can speak other languages .

<p>Despite the rough exterior he is rather soft. Trusting of people and loving to his mate. Helpful and just plain handy when you get down to it. A jack of all trade he is there for those that need him. Whether a shoulder to cry on or just a drinking buddy. He will be there for those that need him.


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



</td></tr></table><table class="vic_table"><tr><td>

<div id="INTtable3">
<div class="title1">Howl</div>
<div class="title2">at the moon</div>

<div class="pic" style="background-image:url(http://i.imgur.com/sWLLsX3.jpg);"></div>


<div class="about">

<p><center><em>OOC</em>
<br>☆ Face Claim: Joe Manganiello
<br>☆ IC =/= OOC
<br>☆ NO Drama
<br>☆ Not always PM friendly.
<br>☆ Be polite, say if you have to go. If you can't let me know later.
<br>☆ Pics are not mine
</center>
</div><div class="quote">
This is where I hide my power.  This is where I become free.
<BR>
This is where I take control and slowly choke your fantasies.

</div></div>


</td></tr></table><table class="vic_table"><tr><td>


<div id="INTtable4">

<p> Will put something here eventually.

</div>


-----------------------------MUSIC---------------------------------

 </td></tr></table></td></tr></table><table><tr><td valign="top" align="center"><table><tr><td>

<div id="sidebar"><div class="sidebarB"><div class="def">

<div class="def1" style="background-image:url(http://i.imgur.com/ocKzuzW.gif);">

</div><div class="linx">


</div></div><div class="quote1">

But I'm, nothing special.  I'm not unique.  I have many secrets, and I eat the weak.


</div><div class="title">

Arooooo

</div><div class="stuff">

<div class="icon">☾</div>

<div class="info">

<BR><Strong>Writing Style</strong>
<BR>Oneliners
<BR>Semi-Para
<BR>Para
<BR>Some times multi-para if the muse strikes.


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