body { font-family: arial; background: url(https://www.sudomemo.net/theatre_assets/theme/sudomemo_new_stars/body_new_stars.gif); overflow: hidden; height: 100%; }
.navbar-container{ height: 32px; line-height: 32px; }
.navbar{ padding: 0 30px; z-index: 100; top: 0; left: 0; right: 0; position: fixed; height: inherit; background: #f5faff; }
.navbar .items{ display: inline-block }
.navbar .items > * { margin: 0 3px; display: inline-block;}
.navbar .items.left{float: left; }
.navbar .items.right{float: right;}

.page-container{
	padding-top: 15px;
	left: 0;
	right: 0;
	height: auto;
	position: absolute;
	top: 32px;
	bottom: 0;
	overflow: hidden;
}
.section{
	background: #f5faff; 
	box-shadow: 0 5px 15px -2px rgba(96, 96, 96, 0.6);
	border-radius: 8px;
	padding-bottom: 20px;
	border-bottom: 2px solid #d3cfcf;
	overflow: hidden;
	height: 100%;
	position: absolute;
}

/*Don't worry, I have a responsive system in mind for this. Eventually*/
.section.main{ left: 0; right: 0; overflow-y: scroll; }
.section.left{ left: -100%; width: 100%; }
.section.right{ right: -100%; width: 100%; }
.container{ width: 100%; height: 100%; }
.entry { margin: 0px; /* 30px; */ }

@media (min-width: 768px) {
.page-container{ overflow-y: scroll; }
.container{ height: 100%; }
.section{ height: auto; }
.section.main{ min-height_: 100%; overflow: hidden; left: 260px; right: 260px; }
.section.left{ left: 30px; width: 200px;}
.section.right{ right: 30px; width: 200px;}
.entry { margin: 0; }
}

.section-head{ padding: 8px 0; color: #f5faff; }
.section-head h4{ line-height: 30px; text-align: center; font-size: 20px; margin: 0 20px;}

.entries.section-head{ background: #4287c3;}
.big-head h4{ line-height: 80px; font-size: 30px; text-align: left;}
.keywords.section-head{ background: #92d05d; }
.users.section-head{ background: #e87272; }

.keywords.section-body{}
.keywords-list {width: 80%; margin: auto;}
.keywords-list li a{ display: block;  padding: 3px ; border-bottom: 2px solid #d3cfcf;}

.users.section-body{}
.users-list { width: 95%; margin: 6px auto auto auto;}
.users-list li { display: inline-block; background: #f5faff; border-radius: 3px; padding: 2px;}
.users-list li a img{ display: block; border: 1px solid white; outline: 1px solid gray;}

.navbar .search{ margin: 0px auto; width: 200px }
.keywords .search{ width: 80%; margin: 5px auto; }
.search{ overflow: hidden; line-height: 20px; border-radius: 10px; color: #f5faff; background: rgba(79, 114, 123, 0.3); }
.search ::-webkit-input-placeholder { color: rgba(96, 96, 96, 0.6); }
.search ::-moz-placeholder { color: rgba(96, 96, 96, 0.6); }
.search :-ms-input-placeholder { color: rgba(96, 96, 96, 0.6); }

.search input, .search .fa{ display: inline-block; line-height: inherit; color: inherit; } 
.search input { margin-left: 10px; background: transparent; border: 0; outline: 0; width: 70%; }
.search .fa { text-align: center; width: 20%; }

/*entry*/
.entry{ display: block; padding: 5px 10px; overflow: hidden; background: #f5faff; }
.main-entry{ display: flex; }
.entry .entry-author{  width: 64px; }
.entry .entry-author img{ display: block; margin: 0px auto; border: 1px solid white; outline: 1px solid gray;}
.entry .entry-content{ flex: 1; }
.entry .entry-content img { max-width:300px; max-height: 300px; }
.entry .entry-info{ font-size: 11px; line-height: 16px; }
.replies, .replies li{ display: inline-block; }
.replies li a{ display: block; }
.replies li img{ vertical-align: bottom;}

/*entry reply (put a normally rendered reply inside a div with this class, and then put that div inside the div with the id entry-reply-list-<Haiku ID> */
div.entry-reply-item { display: flex; margin-left: 45px; padding: 10px; }
/*new entry (must be underneath 'entry' styles)*/
.new-entry{ padding: 0;}
.new-entry .entry-header{ width: 100%; background: #7c7572; color: #f5faff;}
.new-entry .entry-header h4{ font-size: 20px; text-align: center; line-height: 40px; }
.new-entry .entry-content{ display: block; }
.new-entry .entry-content form{ isplay: block; width: 90%; margin: 20px auto;}
.new-entry .entry-content form textarea{ display: block; width: 100%; max-width: 100%; }
.new-entry .entry-content form input{ display: block; width: 100%;}

.notification-entry{ margin: 0 10px; font-size: 14px; line-height: 25px; text-align: center; background: #4287c3; color: white; }

/*buttons*/
.btn {font-size: 11px; overflow: hidden; }
.btn.pad{ position: relative; color: white; margin: 0 3px; padding: 2px 8px 4px 8px; border-radius: 4px; box-shadow: inset 0px -2px 0px 0px rgba(39, 39, 39, 0.2) }
.btn.donate{ background: #829edd; }
.btn.follow{ background: #f5487d; }
.btn.follow:after{ content: attr(data-count); display: inline-block; line-height: 20px; }
.btn.stars{ background: #f58206; }
.btn.delete{ color: #85A600; margin: 0 3px;}
.btn.reply{ color: #85A600; margin: 0 3px;}
.btn.timestamp{ color: #85A600; margin-right: 5px;}

.noselect{-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.dummy-entry{
	height: 150px;
}

/*unimportant stuff for the canvas test*/
.new-entry-input { width: 80%; background: #f2f2f2; padding: 10px;}
.entry-draw { width: 700px; margin: 0 auto; }
#draw-tools { height: 24px; }
#draw-tools span{ line-height: 24px; height: 24px; display: block; float: left; }
#draw-tools .op{ padding: 0 5px; }
#draw-tools .col{ width: 24px; }
.entry-draw label{ float: left; height: 20px; line-height: 20px; }
.entry-draw input{ float: left; height: 20px; }
#canvas-stack{ cursor: crosshair; height: 400px; width: 698px; position: relative; border: 1px solid #989898; border-radius: 5px; background: white; }
.draw-canvas{ position: absolute; }
#canvas-temp { z-index: 50; }
#canvas-main { z-index: 20; }