html, body {padding: 0; margin: 0; font-family: sans-serif; color: #555;}
fieldset legend {font-weight: bold;}
a:hover {color: green;}

header {background-color: blue; padding: 10px 0; color: white;}
header .logo {height: 25px;}
header h1, header h2 {display: inline; padding: 0 12px;}
header .profile-link {float: right;}
header a {text-decoration: none; color: white; transition: all 0.2s;}
header a:hover {text-decoration: underline;}

.menu {margin:0; padding: 5px 0; list-style: none;}
.menu li {margin: 0; padding: 0 2% 0 0; display: inline-block;} 

.wide {width: 80%; margin: 0 auto;}
.small {font-size: 80%;}

.content {margin-bottom: 30px;}
.content aside {float: right; padding: 0; margin: 2%; min-width: 20%; box-sizing: border-box;}

.messages {margin: 10px 0; text-align: center;}
.messages .msg {padding: 5px; border-radius: 5px; width: 98%; display: inline-block; margin: 1px;}
.messages .error-msg {background-color: red; color: white;}
.messages .success-msg {background-color: green; color: white;}

nav[aria-label="breadcrumb"] {color: green; font-size: 90%; font-weight: bold;}
nav[aria-label="breadcrumb"] ul {list-style: none; margin: 0 0 20px 0; padding: 0;}
nav[aria-label="breadcrumb"] ul li {display: inline-block; padding: 0; margin: 0 5px 0 0;}
input[list="join-tags-list"] {border: 1px solid #ccc; font-size: 80%;}

.login {margin-top: 10px; line-height: 120%;}
.login fieldset {margin-top: 20px; width: 320px;}
.login label {display: inline-block; width: 40%; white-space: nowrap; margin-top: 10px;}
.login a {float: right; font-size: 90%;}

.short-stats {border:1px solid #aaa; padding: 20px;}
.short-stats h4 {padding: 0; margin: 10px 0 0 0;}
.short-stats span {float: right;}

#bookmarks {width: 74%; box-sizing: border-box;}

.bookmark-item {margin-bottom: 12px; padding: 1% 0; max-width: 100%; overflow-x: hidden;}
.bookmark-item input {margin: 2px 0 0 0; padding: 0;}
.bookmark-item input:checked + span {background-color: yellow;}
.bookmark-item h1 {margin: 0; padding: 0; display: inline; font-size: 120%;}
.bookmark-item div {font-size: 90%; color: gray;}
.bookmark-item time {font-size: 85%;}
.bookmark-item p {margin: 0; padding: 0; font-style: italic;}
.bookmark-item:hover, .manage-tag:hover {background-color: #eee;}
.bookmark-item .count, .bookmark-item .count a {color: transparent;}
.bookmark-item a:focus + div .count, .bookmark-item .count a:focus, .bookmark-item:hover .count, .bookmark-item:hover .count a {color: gray;}

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

.manage-tag {padding-top: 4px;}

.pager {list-style: none; margin: 0; padding: 0;}
.pager li {margin: 10px; padding: 5px 10px; display: inline-block; border: 1px solid #999; min-width: 20px; text-align: center;}
.pager li:hover {background-color: #eee;}

.search-tags {font-size: 120%; border: 1px solid #ccc; padding: 10px; margin: 10px 0; width: 72%;}
.search-tags input {border: 0; font-size: 100%;}
.search-tags input[type="submit"] {float: right; }
.search-tags span {margin-right: 10px;}
.search-tags span img {width: 15px;}

.search input {font-size: 120%; padding: 5px;}
.search input[name="q"] {width: 80%;}

footer {width: 100%; text-align: center; padding: 1% 0; clear: both; background-color: lightblue; font-size: 90%; margin-top: 1%;}
footer > div {margin: 10px;}
footer > section > div {display: inline-block; width: 20%; text-align: left; vertical-align: top;}
footer ul {list-style: none; margin: 0; padding: 0;}
footer ul li {margin: 2px 0; padding: 0;}

.inside-menu {list-style: ; margin: 0; padding: 0;}
.inside-menu li {margin: 3px 15px;}

.export-area h4 {display: inline-block; padding: 0; margin: 15px 0;}
.export-area a {margin: 0 10px;}

.actions {border: 1px solid #ddd; width: 72%;}
.actions .actions-buttons {float: right;}

/*
.addtoany {float: left;}
.addtoany .a2a_kit a {display: block; float: none; padding: 20px 4px;}
*/

@media (max-width: 1020px) {
	header h1, header h2 { white-space: nowrap;}
	.menu li {display: block;}
}

@media (max-width: 800px) {
	.wide {width: 90%;}
	header .logo {height: 20px; margin: 0; padding: 0; float: right;}
	header a {padding: 0;}
	header h1, header h2 {font-size: 100%; display: block; padding: 0; margin: 0;}
	.menu li {font-size: 90%; margin-top: 5px;}
	.content aside {float: none; margin: 10px auto; font-size: 90%;}
	.content h1, .content h2 {clear: both; font-size: 110%;}

	.login fieldset {width: 90%;}

	nav[aria-label="breadcrumb"] ul li {display: block;}

	.search-tags {font-size: 100%; padding: 5px; width: 90%;}
	.search-tags span {margin: 0 10px 10px 0;}
	.search-tags input {padding: 5px;}

	footer > section > div {width: 26%; padding: 1%; margin-top: 38px;}
	#bookmarks {width: 100%;}
	.bookmark-item h1 {font-size: 100%;}

	.actions {width: 90%;}
	.actions .actions-buttons {float: none; text-align: center;}
	.actions label, .actions button, .actions input[type="submit"] {display: block; width: 100%; padding: 1%;}
}