/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

body {
background: #000205 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwAgMAAAC7jhzYAAAADFBMVEUOHx4OHyMOHyYOHyjkL6RlAAABEUlEQVR42qXXwQ7CIAzG8W8xO/tqO8hLssNezbMxVscwMXH9Q8puTVd+ZMBSlLOZypPqc0RmOSuv9izRVHO3El3stSfzZvcSzzW7lOhqjz3plwrILCD3YX10T7rFAjILyFUPQPUCVECagPxUAioDVEDW6ZyTz7JuHvrz2v8QcVJjaIwcQqPkABonw+gIGUSJFJCTFkB1A1RAfpPn9UqAKgEqIGvSqVYCVAlQAXkkvVolQAWFx7AO2VHpoc3ZemTPF3LQ1qq4ZNdOOEcbu88n+3b8KcqnDMjEJ3sGtONvEiE1hsbIITRKDqBxMoyOkEGUSO6k7oA2ujefbHWMgHKXCqRxZ7wB2uzG3ba6cQMAFG8db/3CEX2RQ/bWAAAAAElFTkSuQmCC') fixed;
font-family: "Noto Sans", sans-serif;
padding: 0 40px 0 40px;
}


#blog{
position:relative;
max-width:960px;
margin: 15px auto;  
}


h1 {
color: #4e745f; 
font-size: 23px; 
line-height: 27px; 
margin: 17px auto;
text-align: left; 
text-indent: 0px; 
font-weight: 600; 
text-shadow: 1px 1px 2px black, 0 0 2px #111;
}
p {
color: #7D7F7D;
font-size: 17px;
line-height: 22px; 
margin: 15px auto;
text-indent: 0px;
hyphens: auto;
padding-top: 3px;
text-align: justify;
padding-bottom: 5px;
text-shadow: 1px 1px 2px #222, 0 0 1px #222;			
}
		
img {max-width:100%; position:relative; margin: 17px auto; display: block;}

img.logo {margin-top:-12px}

em {font-style: italic;}
strong, b{font-weight:500;}
mark {background: rgba(19,10,140,.15); border: 1px solid rgba(110,110,111,.20); color: steelblue; padding:0 3px 2px 3px;border-radius:3px;position:relative;margin:0 1px;vertical-align: 1px;}

.dashed {
background: -moz-linear-gradient(left, #465945, #465945	60%, transparent 60%);
background: -ms-linear-gradient(left, #465945, #465945 60%, transparent 60%);
background: -o-linear-gradient(left, #465945, #465945 60%, transparent 60%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#465945), color-stop(0.6, #465945), color-stop(0.6, transparent));
background: -webkit-linear-gradient(left, #465945, #465945 60%, transparent 60%);
background: linear-gradient(left, #465945, #465945 60%, transparent 60%);
background-size: 10px 1px;
background-repeat: repeat-x;
background-position: 0 97%;
cursor: url(../samo/notabene.png), help;
}

.bar {  
width: 330px;  
background: #333;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQBAMAAAAVaP+LAAAAD1BMVEUKHisTGRwJFh8KHSkWJjDcrD1+AAABlUlEQVR42rXZ3WnDMBiG0ZfSBUIyQMkGIQskoP1nqvwT25he9TvSjRG2Hw7C0o1zn0dOo7XLNp597LPWzs+uheXyc7r53d7bq9ceemyzW3udnv06hOqgj6hOCgJtojIpCLSLqqQg0EFUJAWBjqIaKQh0X3dKncRAGUQqgMaQSqARpCLIk8ogTQIgSyIgSUIgR2IgRYIgQ6IgQcKgOomDqqQBoBppCKhCYqAXIgWBegiRgkAtN0QKAvUQIgWBppAhBYHmECEFgZaQIAWB1hAgBYE+i10nBYG2D7JMCgLtm7ZKCgIdDrYiKQh0yQORgkA9hEhBoClkSEGgebEJKQj0zBWRgkA9hEhBoClkSEGgOURIQaAlJEhBoDUESEGgz2LXSUGg7YMsk4JA+6atkoJAh4OtSAoCXfJGpCBQDyFSEKj942/j3yQGyiBSATSGVAKNIBVBnlQGaRIAWRIBSRICORIDKRIEGRIFCRIG1UkcVCUNANVIQ0AVEgP9IFIQqIcQKQg0hQwpCDSHCCkItIQEKQi0hgDpFymFsJ+k6RgwAAAAAElFTkSuQmCC');     
color: #fff;     
position: fixed;     
min-height: 110px;    
bottom: 0px;
z-index:100;
left: -362px;    
border: 1px solid rgba(3,3,4,.25);     
padding-left: 30px;   
transition: left 1190ms ease-out;
}

.bar::after {
content: '\f0f4';
font: normal 24px/24px fontawesome;
color: #020;
text-shadow: 0px 0px 6px #435C26, 0 0 3px #6C986A; 
position: absolute;     
right: -32px;
bottom: 10px;    
}
 .bar:hover {
left: 0;
}
 .bar:hover:after {
content: '\f0f4';
color: #011;
}
.bar section, .baro section {margin: 10px 7px;}

a:link { color: #F7BD50; text-decoration: none; transition: 900ms;}
a:visited { color: #F7BD50; text-decoration: none; transition: 900ms;}
a:hover { color: #B57900; text-decoration: none; text-shadow: 1px 1px 2px black, 0 0 2px #111; transition: 900ms;}


.lo {
z-index: 1000;	
padding: 0;	
border: none;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' version='1.1'%3E%3Cg transform='translate%28-195.26384,-517.3622%29'%3E%3Cpath d='m210.3 517.4a15 15 0 0 0-15 15 15 15 0 0 0 15 15 15 15 0 0 0 15-15 15 15 0 0 0-15-15zm-8.5 5.3 9 0c0.8 0 1.5 0 2 0 0.5 0 1 0 1.4 0.1 0.4 0 0.7 0.1 1 0.1 0.3 0.1 0.6 0.1 0.9 0.2 0.9 0.3 1.6 0.8 2.3 1.5 0.7 0.7 1.2 1.5 1.5 2.6 0.2 0.6 0.3 1.1 0.4 1.6 0.1 0.5 0.1 1.3 0.1 2.3l0 11-11.3 0c-1 0-1.9 0-2.6 0-0.7 0-1.2-0.1-1.7-0.2-0.5-0.1-0.8-0.2-1.2-0.3-0.3-0.1-0.6-0.3-0.9-0.5-0.7-0.5-1.3-1.2-1.7-2-0.4-0.8-0.6-1.7-0.6-2.7 0-1.4 0.3-2.5 1-3.6 0.7-1 1.5-1.7 2.6-2.1 0.9-0.3 2.4-0.4 4.4-0.4l6.6 0c0-0.7-0.1-1.3-0.2-1.7-0.1-0.5-0.3-0.8-0.6-1-0.3-0.3-0.7-0.5-1.2-0.6-0.5-0.1-1.2-0.2-2-0.2l-9 0 0-4.2zm6.2 11.8c-0.2 0-0.3 0-0.4 0-0.1 0-0.2 0-0.3 0-0.1 0-0.2 0-0.3 0-0.4 0.1-0.7 0.3-0.9 0.6-0.2 0.3-0.3 0.6-0.3 1 0 0.6 0.2 1.1 0.6 1.3 0.5 0.3 1.2 0.4 2.2 0.4l6.2 0 0-3.5-6.2 0-0.8 0z' fill='%23397955'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
bottom: 8px;
position: fixed; 
right: 5px;
cursor: pointer; 
opacity: 0.3; 
width: 28px;
height: 28px;
transition: 1111ms linear;
background-size: 28px auto;}

.lo:hover {opacity: .8;}



@media screen and (max-width: 550px) {
#blog p {font-size: 15px} 
#blog h1 {font-size: 18px} 
body {padding-left: 35px; padding-right: 35px;} 
}
@media screen and (min-width: 1910px) {#blog p {font-size: 19px} }
@media screen and (min-width: 1910px) {#blog h1 {font-size: 25px} }