s2generations | CSS: Beautified

/*--

	Layout by YOURNAME
	ETC ETC

	-------------------------------------------

	S2 Generations by Tessisamess
	tessisamess.insanejournal.com
	patreon.com/tessisamess
	tessisamess.gumroad.com

	-------------------------------------------

	For information on this stylesheet go to:
	s2generations.dreamish.org

--*/


/* REPLACEMENTS */

:root{
/* COLORS */
	--headings-color: #000;
	--text-color: #222;
	--date-color: #999;
	--lightest: #fff;

	--page-bg: #f4f4f4;
	--content-bg: #fff;
	--borders: rgba(0,0,0,0.1);
	--accent: #888;

	--links: ;
	--links-hover: ;

	--content-links: ;
	--content-links-hover: ;

/* FONTS */
	--main-font: calibri, arial, sans-serif;
	--headings: monospace;

	--body-text: 13px;
	--nav-text: 9px;

	--subject-text: 9px;
	--entry-info-text: 9px;
	--entry-tags-text: 8px;

	--credit-text: 8px;

/* DIMENSIONS */
	--content-width: 800px;
	--page-inset: 30px;

	--side-width: 200px;
	--side-padding: 20px;

	--margin: 20px;
	--padding: 30px;

	--entry-padding: 30px;
	--entry-margin: 30px;
	--entry-content-margin: 10px;

	--entry-icon: 60px;

/* IMAGES */
	--bg-img: url()center fixed;
	--background-size: auto auto;

	--cursor: url();
	--cursor-hover: url();

	--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat !important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat !important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat !important;
}


/* FONTS */




/* GLOBAL ELEMENTS */

.custom-element p{margin:0;}
.custom-element br{display:none;}

*,*:before,*:after{box-sizing:border-box;}
*:focus{outline:none;}
form *{font-family:var(--main-font);}

::selection{
	background:var(--accent);
	color:var(--lightest);
}

::-moz-selection{
	background:var(--accent);
	color:var(--lightest);
}

::-webkit-scrollbar-track{
	background:var(--page-bg);
}

::-webkit-scrollbar{
	width:7px;
	background:transparent;
}

::-webkit-scrollbar-thumb{
	background:var(--accent);
	border:2px solid var(--page-bg);
	border-radius:5px;
}

body{
	margin:0;
	padding:0;
	background:var(--page-bg) var(--bg-img);
	background-size:var(--background-size);
	font-family:var(--main-font);
	font-size:var(--body-text);
	color:var(--text-color);
	cursor:var(--cursor), auto;
}

a:link,a:visited,a:active{
	color:var(--links);
	text-decoration:none;
	cursor:var(--cursor-hover), pointer;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}

a:hover{
	color:var(--links-hover);
	text-decoration:none;
}

h1,h2,h3,h4,h5,h6{
	font-family:var(--headings);
	color:var(--headings-color);
	margin:0;
	font-weight:normal;
}

blockquote{}

img{max-width:100%;}

ul{}
ul li{}
ol{}
ol li{}
li:not(ul li){}
li:not(ol li){}

hr{}

details{}
details[open]{}
details summary{cursor:var(--cursor-hover), auto;}
details summary::marker{}
details[open] summary{}
details[open] summary::marker{}

code{}

table{}
table tbody{}
table th{}
table tr{}
table td{}

.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}


/* PAGE SETUP */

#layout{
	min-height:100vh;
}

#layout-inner{
	max-width:var(--content-width);
	margin:0 auto;
	padding:var(--page-inset);
}

.header-layout{}
.sidebar-layout{}
.header-sidebar-layout{}


/* PAGE VIEWS */

.pageview-recent{}
.pageview-read{}
.pageview-tagged{}

.pageview-archive{}
.pageview-date{}
.pageview-month{}

.pageview-tagspage{}


/* JOURNAL NAV */

#nav-links{
	margin:0 0 var(--margin) 0;
	font-size:var(--nav-text);
}

.nav-links-inner{}

.nav-links-inner ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
}

.nav-links-inner li{
	margin:0 8px 0 0;
}
.nav-links-inner li.current{}

.nav-links-inner li.recent{}
.nav-links-inner li.profile{}
.nav-links-inner li.reading{}
.nav-links-inner li.calendar{}
.nav-links-inner li.tags{}

.nav-links-inner li a{}
.nav-links-inner li.current a{}
.nav-links-inner li a:hover{}


/* PAGE NAV */

.skiplinks{
	margin:var(--margin) 0 0 0;
	text-align:center;
	font-size:var(--entry-info-text);
}

.skiplinks.day-page{}

.skiplinks a{}
.skiplinks a:hover{}
.skiplinks a.forward{}
.skiplinks a.back{}

.nav-separator{
	margin:0 5px;
}


/* CUSTOM HEADER - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-header{
	margin:0 0 var(--margin) 0;
}


/* CUSTOM SIDEBAR - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-sidebar{
	float:left;
	width:var(--side-width);
}


/* CUSTOM FOOTER - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-footer{
	margin:var(--margin) 0 0 0;
}


/* CREDIT LINK */

#credit-link{
	position:fixed;
	bottom:0;
	left:0;
	padding:10px;
	opacity:0.5;
	font-size:var(--credit-text);
	text-transform:uppercase;
	letter-spacing:1px;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}

#credit-link:hover{
	opacity:1;
}

#credit-link .credit-text{}

#credit-link a{}
#credit-link a:hover{}


/* SIDEBAR & ENTRIES */

#content{}
#content-inner{}
#content-inner:after{content:'';display:table;clear:both;}


/* ENTRY LIST */

#entries{}
#entries-inner{}

.sidebar-layout #entries{
	margin:0 0 0 calc(var(--side-width) + var(--margin));
}

.header-sidebar-layout #entries{
	margin:0 0 0 calc(var(--side-width) + var(--margin));
}

#tagpage-header{
	margin:0 0 var(--margin) 0;
	text-align:center;
}

#tagpage-header h2{
	font-size:var(--entry-info);
	font-family:var(--main-font);
}

#entries a,
#entries a:visited{
	color:var(--content-links);
}

#entries a:hover{
	color:var(--content-links-hover);
}


/* ENTRIES */

.entry{
	margin:0 0 var(--entry-margin) 0;
	padding:var(--entry-padding);
	background:var(--content-bg);
	border:1px solid var(--borders);
	position:relative;
}

.entry-inner{}


/* ENTRY HEADER */

.entry-header{}

.entry-header-inner{
	display:flex;
	align-items:center;
}

.entry-header-content{
	width:100%;
	display:flex;
	justify-content:space-between;
}

/* .poster-info ~ .entry-header-content{width:calc(100% - var(--entry-icon));} */
.entry-header .poster-info{
	display:none;
}

.userpic{}

.userpic img{
	width:var(--entry-icon);
	height:var(--entry-icon);
	margin:0 15px 0 0;
}

.poster-info .user{}
.poster-info .user .ljuser{}
.poster-info .user .ljuser a[href*='profile']{display:none;}
.poster-info .user .ljuser ~ .ljuser{}

.outer-poster{
	position:absolute;
	top:0;
	right:calc((var(--entry-icon) + 10px) * -1);
	text-align:center;
	font-size:smaller;
}

.outer-poster img{
	margin:0 0 5px 0;
	padding:5px;
	background:var(--content-bg);
	border:1px solid var(--borders);
}

.subject{}
.subject a{}

.subject h3{
	display:flex;
	align-items:center;
	font-size:var(--subject-text);
}

.subject h3 .security-icon{
	margin:0 5px 0 0;
}

.subject h3 .security-icon img{}

.date-time{
	font-size:var(--entry-info-text);
	color:var(--date-color);
}

.date-time .date{}
.date-time .at{margin:0 3px;}
.date-time .time{}


/* ENTRY CONTENT */

.entry-content{
	margin:var(--entry-content-margin) 0 0 0;
}

.entry-content-inner{}


/* ENTRY TAGS */

.entry-tags{
	margin:var(--entry-content-margin) 0 0 0;
	font-size:var(--entry-tags-text);
}

.entry-tags a{}
.entry-tags a:hover{}

.entry-tags.comma-list{}
.entry-tags.comma-list b{}

.entry-tags.hashtags{}


/* ENTRY FOOTER */

.entry-links{
	margin:var(--entry-content-margin) 0 0 0;
	font-size:var(--entry-info-text);
}

.entry-links ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	justify-content:flex-end;
}

.entry-links ul li{
	margin:0 0 0 8px;
}

.entry-links li.reply{}
.entry-links li.entry-comments{}
.entry-links li.edit-entry{}
.entry-links li.edit-tags{}

.entry-links li.tell,
.entry-links li.add-mem,
.entry-links li.track,
.entry-links li.untrack{display:none;}

.entry-links ul li a{}
.entry-links ul li a:hover{}


/* TAGS PAGE */

.entry.tags-list{}

.tags-list .subject{}
.tags-list .subject h3{}

.tags-list .all-tags{
	list-style-position:inside;
	padding:0;
	margin:0;
}

.tags-list .all-tags li{}
.tags-list .all-tags li a{}
.tags-list .all-tags li a:hover{}

.tags-list .all-tags li .tag-separator{margin:0 5px;}

.tags-list .all-tags li .uses{}


/* ARCHIVE PAGE */

.yearlinks{
	text-align:center;
	margin-bottom:10px;
}

.yearlinks-inner{
	text-align:center;
	margin-bottom:10px;
}

.years{
	list-style:none;
	margin:0;
	padding:0;
}

.years li{
	display:inline;
	padding:0;
}

.entry.month-calendar{}

.yeartable{
	border-collapse:separate;
	border:none;
	width:100%;
}

.dayname{
	letter-spacing:2px;
	text-transform:uppercase;
	text-align:center;
	background:var(--accent) !important;
	color:var(--lightest);
}

.yeartable td{
	border:none !important;
	background:rgba(0, 0, 0, 0.05);
	padding:5px;
}


/* MONTH PAGE */

.entry.month-list{}

.month-list form{}
.month-list form center{}
.month-list form center a{}
.month-list form center select{}
.month-list form center input[type='submit']{}

.month-list dl{}

.month-list dt{}
.month-list dt a{}
.month-list dt b{}

.month-list dd img{}


/* ICON REPLACEMENTS */

img[src*="entry/private.png"],
img[src*="entry/protected.png"],
img[src*="entry/groups.png"]{
	width:0 !important;
	height:0 !important;
	padding:13px 0 0 16px!important;
	background-size:auto 100%!important;
}

img[src*="entry/private.png"]{
	background:transparent var(--private);
}

img[src*="entry/protected.png"]{
	background:transparent var(--locked);
}

img[src*="entry/groups.png"]{
	background:transparent var(--customs);
}