sprashufes | With Image (Reply)

Click for full image

html {
	font-family: "Inter", sans-serif;
	font-size:12px;
}

body {
	background:url('https://sprashufes.dreamwidth.org/file/416.png') no-repeat fixed top 81px right 21px / auto 120%, url('https://sprashufes.dreamwidth.org/file/2207.png') no-repeat fixed center center / cover;
	background-color:#28d1f9;
}

#content > div:nth-child(1) {
	margin-right:300px;
	}

a {
	color:#000000;
	font-weight:800;
		height: 100%;
}
a:hover { color:#b1b1b1; }

#lj_controlstrip > div {
	flex-grow:0;
}
#lj_controlstrip {
	width:100vw;
	background:#ffffff; 
	color:#000000;
	position:fixed;
	top:auto;
	bottom:0vh;
	z-index:100;
	border-top:4px solid #000000;
	flex-wrap: wrap;
	padding:10px;
	
}
#lj_controlstrip a,#lj_controlstrip_statustext {
	color:#000000;
	font-family:ms gothic, arial!important;
	font-size:12px;
}

#header {display:none;}
.topnav {display:none;}
.above-entry-interaction-links, .below-reply-container {display:none;}

#canvas {
	display:block;
	position:fixed;
	top:76px;
	bottom:70px;
	left:0;
	right:0;
	overflow-y:scroll;
}

#canvas > .inner {
	display: table;
	height:100%;
	width:100%;
}

#content {
	display:table-cell;
	vertical-align: middle;
	
}

#primary { 
	max-width:600px;
	padding:00px 150px 00px 50px;
	margin:0 auto;
}

#secondary {
	float: left;
	width: 15em;
	margin-left: -15em;
}

#entries {
	margin:0px auto;
}

#entries > div > div:nth-child(2) .header, #primary > div > div > div:nth-child(2) .header {
	background-color:#ffffff;
	position:fixed;
	top:0;
	left:0;
	right:0;
	border-bottom:4px solid black;
	z-index:2;
	padding:0 30px;
	text-align:right;
}

#entries > div > div:nth-child(2) .header > div, #primary > div > div > div:nth-child(2) .header > div  {
	display:flex;
	justify-content: flex-end;
	align-items:baseline;
	}

#entries > div > div:nth-child(2) .header a, #primary > div > div > div:nth-child(2) .header a {
	text-decoration:none;
	
}

#entries > div > div:nth-child(2) .header h3, #primary > div > div > div:nth-child(2) .header span { order:1;}
#entries > div > div:nth-child(2) .header h3, #primary > div > div > div:nth-child(2) .header h3	{
	font-size:60px;
	margin:0;
	padding:0;
	font-weight:bold;
	display:inline;
	vertical-align: baseline;
	order:2;
}

#entries > div > div:nth-child(2) .header span.datetime, #primary > div > div > div:nth-child(2) .header span.datetime {
	position:relative;
	bottom:0;
	height:100%;
	display:inline;
	vertical-align: baseline;
	margin:0 30px;
}

.entry-wrapper {
	padding:20px 0;

}

.entry {
	background-color: black;
	border-radius: 0% 0% 0% 0%/0% 0% 0% 0%;
	padding: 1px;
}

.entry > .inner {
 position: relative;
	background-color: #ffffff;
	padding: 20px;
	border-bottom-left-radius: 3px 179px;
	border-bottom-right-radius: 170px 2px;
	border-top-left-radius: 130px 4px;
	border-top-right-radius: 177px 2px;
	margin: 2px;

}

.entry-title {
	margin:0;
}

.entry .userpic {
	position:absolute;
	top:0;
	right:-100px;
	
}

.entry .userpic img {
	width:60px;
	height:60px;
	border:6px solid #ffffff;
}

.entry .entry-poster {
color:rgba(0, 0, 0, 0);
	width:120px;
	position: absolute;
	top: 80px;
	right: -150px;
	display:table-cell;
	font-size:0em;
}

.entry .entry-poster > span {
	font-size:12px!important;
	line-height:3em;
}

.entry .entry-poster .ljuser a {
	text-decoration:none;
}

.entry .entry-poster .ljuser a:nth-child(1) {
	display:inline-block;
	margin-right:-20px;
	vertical-align:bottom;
	
}

.entry .entry-poster .ljuser  a:nth-child(2) {
	background-color: #ffffff;
	padding: 5px;
	border-left:10px solid #000000;
	
}

.entry .entry-poster img {
	 opacity: 0;
}

.entry-content > p:first-child { margin-top:0; }
.entry-content > p:last-child { margin-bottom:0; }

.entry .footer {
	margin-top:20px;
}

.entry .footer .inner {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

ul.entry-interaction-links {
	padding:0;
	margin:0;
 display:inline-block; 
}

ul.entry-interaction-links li {
	padding:0;
	margin:0;
 display:inline-block; 
}

ul.entry-management-links {
	padding:0;
	margin:0;
	flex-grow:1;
	order:3;
	text-align:right;
}

.entry-management-links li {
display:inline-block;
}
.entry .tag {
	flex: 1 1 100%;
	}
	
.entry .tag-text {
padding-right:10px;
	float:left;
}

.entry .tag ul {
	padding:0;
	margin:0;
}

.entry .tag ul li {
	display:inline-block;
	padding-right:10px;
}

.bottomnav { 
	text-align:right;
	padding:0 0 20px 0;
	}
	
.bottomnav > .inner { 
	display:inline-block;
	text-align:right;
	background-color:#ffffff;
	padding:0 10px;}

.bottomnav ul {
	list-style-type: none;
	margin:0;padding:0
}

.bottomnav ul li {
 display:inline-block; 
	padding:10px;
}

.module {
	background-color:#ffffff;
	text-align:center;
	margin:20px 0;
	padding:20px;
	
}

ul.userlite-interaction-links {
	padding:0;
	margin:0;
}

.userlite-interaction-links li {
	display:inline-block;
}

.module ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

.module h2 {
	margin:0 0 10px 0;
}

#comments .comment {
	min-width: unset!important;
}

.comment {
	background-color:#ffffff;
	padding:20px;
	margin-bottom:20px;
	position:relative;
}

.comment-pages { 
	
	background-color:#ffffff;
	text-align:center;
	margin-bottom:20px;
	padding:10px;
}

.comment-pages a {
}

.comment .userpic {
	position:absolute;
	top:0;
	right:-100px;
	
}

.comment .userpic img {
	width:60px;
	height:60px;
	border:6px solid #ffffff;
}

.comment h4.comment-title {
	margin:0;
}

.comment .footer .inner {
	display:flex;
	gap:10px;
	align-items:baseline;
	flex-wrap: wrap
}

.comment ul.comment-management-links {
	padding:0;
	margin:0;
	flex-grow:1;
}

.comment .multiform-checkbox {
order:3;
}

.comment .footer .inner > div {
flex: 0 1 100%;
	flex-grow:1;
	order:5;
}

#qrdiv {
	background-color:#ffffff;
	padding:20px;
}

.comment #qrdiv {
	background:none;
}

#qrformdiv {
	position:static!important;
	min-width:inherit!important;
}

.comment ul.comment-management-links li {
	display:inline-block;
}

.comment ul.comment-interaction-links {
	padding:0;
	margin:0;
	display:inline-block;
	text-align:right;
}

.comment ul.comment-interaction-links li {
	display:inline-block;
}

.comment .comment-content {
	margin:20px 0;
}

.bottomcomment {
background-color:#ffffff;
padding:20px;
 margin-bottom:20px; 
	text-align:center;
}

.bottomcomment ul.entry-management-links {
	margin-bottom:20px;
	text-align:center;
}

#footer {
text-align:center;
padding:20px 0;
display:none;}

p.noentries { text-align:center; }

.icons-container .contents > div:nth-child(1)	{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

.icons-container .sorting-options {
	background-color:#ffffff;
	padding:10px;
	grid-column: span 2;
	text-align:center;
}

.manage-icons-link {
	background-color:#ffffff;
	text-align:center;
	padding:10px;
	margin-top:20px;
}

.icons-container .sorting-options ul {
	margin:0;
	padding:0;
}

.icons-container .sorting-options ul li {
	display:inline-block;
}

.icons-container .icon {
	background-color:#ffffff;
	padding:1px;
	display:grid;
	grid-template-columns:min-content 1fr;
	gap:10px;
	padding:10px;
	align-items:center;
}

.icons-container .header {
	background-color:#ffffff;
	position:fixed;
	top:0;
	left:0;
	right:0;
	border-bottom:4px solid black;
	z-index:2;
	padding:0 30px;
	display: table-cell;
	direction: rtl;
	}

.icons-container .header h2	{
	font-size:60px;
	margin:0;
	padding:0;
	font-weight:bold;
	display:inline;
	vertical-align: baseline;
}

.icons-container .icon .icon-info ul {
	margin:0;
	padding:0;
	}

.icons-container .icon .icon-info ul li {
	display:inline;
	}
.icons-container .icon .icon-info .keywords-label {
	float:left;
	padding-right:3px;
	}

.icons-container .icon .icon-info span {
	font-weight:800;
	}

@media only screen and (max-width: 883px) {

#canvas {
	top:88px;
	bottom:118px;
	}
	
	
#content > div:nth-child(1) {
	#lj_controlstrip > div {
		flex-grow:1;
		}

margin-right:100px;
	}

#entries > div > div:nth-child(2) .header, #primary > div > div > div.entry .header {
		text-align: left;
		padding:10px;
		}
	#entries > div > div:nth-child(2) .header h3, #primary > div > div > div:nth-child(2) .header h3 {
		font-size: 40px;
		display: block;
		}
}

@media only screen and (max-width: 700px) {
#content > div:nth-child(1) {
	margin-right:0px;
	}

#primary {
		margin:8%;
		padding:0;
		}
	#entries > div > div:nth-child(2) .header, #primary > div > div > div:nth-child(2) .header {
		text-align: left;
		}
	#entries > div > div:nth-child(2) .header h3, #primary > div > div > div:nth-child(2) .header h3 {
		font-size: 40px;
		display: block;
		}
	#footer {
		width: 100%;
		padding-left: 0;
		margin:8%;
		text-align: center;
		}
	.entry .userpic {
		position:static;
		float:left;
		margin:0 15px 5px 0;
		}
	.entry .entry-poster {
		position:static;
		}
		
	
		
	.comment .header {
		margin-left:75px;
		}
		
	.comment .poster {
		margin-left:75px;
		}
		
	.comment .userpic {
		position: absolute;
		top:15px;
		left:15px;
		right:initial;
		}
	
}