teal - nate - css

/*
*
This layout was created by VK.
Any attempts of copying, stealing or
restributing my codes/ideas will be dealt with accordingly.
*
*/

body{
 overflow:hidden;
}

body:before{
content:"t h e m e b ";
position: fixed;
color: #555;
bottom: 16px;
right: -23px;
font: 13px Raleway;
line-height: 90px;
text-transform: uppercase;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

body:after{
content:"v e e k a y";
position: fixed;
color: #555;
bottom: -28px;
right: 8px;
font: 13px Raleway;
line-height: 90px;
text-transform: uppercase;
}

.xg_theme #xg {
 position: fixed;
 width: 100%;
 height: 100%;
 padding: 5px;
 left: 200px;
 top: 70px;
}

#xg_layout_column_2 {
 position:fixed;
 width:300px;
 height: 280px;
 margin-top: 80px;
 margin-left: 10px;
 color: #fff;
 border-top: 3px solid #3c3c3c;
}

#xg_layout_column_2:before {
 content:"something short here, ";
 position:absolute;
 top:-75px;
 margin-left:-7px;
 height:110px;
 width: 300px;
 padding: 10px;
 padding-right: 30px;
 font: 12px Montserrat;
 text-align: left;
 font-weight: bold;
 text-transform: uppercase;
}

#xg_layout_column_2:after {
 content:"quote here.";
 position:absolute;
 top:-60px;
 margin-left:-9px;
 height:50px;
 width: 360px;
 opacity: 1;
 padding: 5px;
 font: 38px Playfair Display;
 text-align: left;
 text-transform: normal;
 font-style: italic;
}

#xg_layout_column_1 {
 width: 350px;
 height: 400px;
 overflow: hidden;
 border: 15px solid #000;
 outline: 1px solid #fff;
 outline-offset: -15px;
 -webkit-transition: all 600ms ease-in-out;
 transition: all 600ms ease-in-out;
}

#xg_layout_column_1:before{
 content:"n a t e";
 position:absolute;
 top:40px;
 margin-left:7px;
 bottom: 0;
 height:110px;
 width: 10px;
 padding: 10px;
 padding-right: 30px;
 font: 53px bebas_neue;
 text-align: left;
 font-weight: bold;
 text-transform: uppercase;
 line-height: 80px;
 -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
 -webkit-text-stroke-width: 10px;
 -webkit-text-stroke-color: rgba(0,0,0,0.2);
}

#xg_layout_column_1:after {
content:"";
position: absolute;
width: 350px;
height: 400px;
top: 15px;
left: 15px;
background:url(https://data.whicdn.com/images/347416337/original.jpg);
background-size: cover;
background-position: -25px 0px;
-webkit-filter: blur(0px) grayscale(1) brightness(60%);
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

#xg_layout_column_1:hover:after {
content:"";
opacity: 0.4;
-webkit-filter: blur(2px) grayscale(1);
background-position: -100px 0px;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.module_user_summary:before {
content:"";
position: absolute;
color: #000;
font:9px/100% calibri;
text-transform: uppercase;
left: 10px;
top: 385px;
}

#xj_photo_img_tag{
width: 100px;
border-radius: 000px;
outline: 1px solid #133A56;
margin-top:20px;
margin-left: 20px;
box-shadow: #133A56 6px 6px 0, #133A56 -6px -6px 0, #133A56 -6px 6px 0px, #133A56 6px -6px 0;
}

.dy-avatar.dy-avatar-full-width{
position: absolute;
padding: 0px;
overflow: hidden;
width: 175px;
height: 175px;
margin-top: 130px;
margin-left: 5px;}

.dy-avatar.dy-avatar-full-width:before {
content: "";
position:absolute;
top:25px;
left:73px;
z-index:2;
height:88px;
width:0px;
background:transparent;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
transition:all 0.6s; }

.dy-avatar.dy-avatar-full-width:after {
content :"";
position:absolute;
top:62px;
left:26px;
z-index:2;
height:0px;
width:87px;
background:transparent;
border-right:1px solid #fff;
border-left:1px solid #fff;
transition:all 0.6s; }

.dy-avatar.dy-avatar-full-width:hover:before{
width:calc(68% - 13px);
-webkit-transition:all 0.6s;
transition:all 0.6s; left: 26px;}

.dy-avatar.dy-avatar-full-width:hover:after {
height:calc(57.9% - 13px);
-webkit-transition:all 0.6s;
transition:all 0.6s; top: 26px;}

.module_user_thumbnail{
position: absolute;
height:450px;
width: 150px;
overflow: hidden;
margin-left:400px;
margin-top: 0px;
background: rgba(0,0,0,1);
opacity: 0;
border-left: 1px solid #fff;
box-shadow: -5px 0px 5px -3px rgba(0,0,0,0.75);
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

#xg_layout_column_1:hover .module_user_thumbnail{
margin-left:200px;
opacity: 1;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

.module_user_thumbnail:before{
content:"";
position: absolute;
height:100px;
width: 100px;
overflow: hidden;
opacity: 1;
top: 20px;
left: 19px;
border: 6px solid #133A56;
outline: 1px solid #000;
outline-offset: -6px;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/7814471475?profile=original) no-repeat; /* gifs look better here */
background-position: center;
background-size: cover;
-webkit-filter: grayscale(0);
}

.module_user_thumbnail:after{
content:"";
position: absolute;
height:100px;
width: 100px;
overflow: hidden;
opacity: 1;
top: 268px;
left: 19px;
border: 6px solid #133A56;
outline: 1px solid #000;
outline-offset: -6px;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/7814476261?profile=original) no-repeat; /* gifs look better here */
background-position: center;
background-size: cover;
-webkit-filter: grayscale(0);
}

#xg_body a {
 text-transform: uppercase;
 font: bold 13px Raleway;
 line-height: 17px;
 transition: all 0.5s ease;
 opacity: 1;
 cursor: url(http://static.tumblr.com/bcpenwm/8sInbxu65/cursorhover.png), auto !important;
}

td, a, body, table, body, td, li, p, div, li, h1, h2, p, br, .text, textarea, input, .blacktext12, .btext, .lightbluetext8, a:link, a:active, a:hover, a:visited, .orangetext15, .whitetext12, .blacktext10 .redtext, .redbtext {
 font:11px Raleway;
}

::-webkit-scrollbar {
 width:17px;
 height:17px;
 background:#fff;
}

::-webkit-scrollbar-thumb:horizontal {
 background: #trans;
}

::-webkit-scrollbar-track {
 border:8px solid #fff;
 background:#ddd;
}

::-webkit-scrollbar-thumb {
 border-right:8px solid #fff;
 border-left:8px solid #fff;
 border-bottom:4px solid #fff;
 border-top:4px solid #fff;
 background:#000;
}

::selection {
 background: #ccaa99;
 color: #111;
}

.xg_sprite-friend-add,
.xg_sprite-friend-request{
 position: fixed!important;
 bottom: 10px;
 left: -5px;
 font: 20px Raleway!important;
}

.xg_module_comment_wall {
 display: none;
}

.module_about_user {display:none;}
ul.nobullets.last-child {display:none;}
dd.profile-social-buttons,dd.relationship {display:none !important;}
.xg_theme #xg_foot {display: none;}
#xg_body h2, #xg_body h3 { display: none; }
#xj_StatusAndShareLink {display:none}
.xg_sprite xg_sprite-share {display:none!important;}
.xg_module_body .nobullets.last-child {display:none!important;}
.xg_chat.chatFooter .xg_chatBar, .xg_sprite .xg_sprite-add, .xg_span-5, .module_groups, .sortable.module_feed,  .module_photo, .xg_column.xg_span-4.xg_last.xj_classic_sidebar, .btn .label, #count, .module_blog , .xg_sprite.xg_sprite-share , ul.navigation li a, .xg_sprite-share , a.xg_sprite-message-block , .post_to_facebook , .post_to_twitter , .vcard .profile-like-button,ul.navigation.easyclear, .account-links, #xg_foot, #xg_module_account, #xg_sitedesc, #xg_navigation ul li, #xg_sitename, #xg_navigation, #xg_navigation ul, #xg_navigation, #xj_module_gift, #xg_module_body {visibility:hidden;} .xg_dock {display:none!important;} #xg_head, #xg_foot, .xg_span-5, ul.navigation li.right a, .xg_chat.chatFooter .xg_chatBar, .xg_sprite .xg_sprite-add, #xg_module_body{ display: none;} .xg_sprite .xg_sprite-add{ display: none;} .xg_sprite {background-image: none!important;} #xg_profile_activity, .module_members{display:none;} .module_members{display:none;} .xj_appearance_editor_profile{display:none;} .xg_module_body dt, .xg_module_body.profile.vcard dl.last-child, .online { display:none;} a.xg_sprite.xg_sprite-friend-remove { display:none!important;} .xg_column.xg_span-7.xg_last {display:none;}

.dy-badge-text-label,
.dy-badge-text-bg{
 display:none!important;
}

#xn_bar{
 left: -80px;
 top: 0px;
 background-color: transparent!important;
}

#xn_bar_menu_tabs,
#xn_bar_menu_more,
p#xn_gyo_link,
p#xn_brand{
 display:none !important;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'),
url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v11/JbtMzqLaYbbbCL9X6EvaI_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://fonts.gstatic.com/s/oswald/v10/BObL_3V2WX-YniTOi4CsnvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display SC'), local('PlayfairDisplaySC-Regular'), url(http://fonts.gstatic.com/s/playfairdisplaysc/v5/G0-tvBxd4eQRdwFKB8dRkRUcjaGRfmzOW8pfsS-qBq8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.xg_theme #xg{
position:fixed;
top: 15%;
margin-left:-30px;
height:430px;
width: 720px;
color: #000;
background: #222;
border-top: 5px solid #133A56;
border-bottom: 5px solid #133A56;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
box-shadow: 0.01rem 0.01rem 0.5rem #000;
}