/* reset
*******************************************************************************/

* {margin:0;padding:0} iframe,a img,fieldset,form,table {border:0} h6,h5,h4,h3,h2,h1,caption,th,td {font-size:100%;font-weight:normal}
dd,dt,li,dl,ul,ol {list-style:none} legend {color:#000} button,select,textarea,input {font:100% serif} table {border-collapse:collapse} caption,th,td{text-align:left}



/* rough layout: mobile first 
*******************************************************************************/

body {
    padding-top: 0px;
}
	
#menu {
    text-align: center;
    margin-bottom: 1em;
    padding: 1em 0 1em 0;
    background-color: #159957;
    background-image: linear-gradient(120deg, #77888f, #364e59);

}
	
#menu li {
    display: inline-block;
    padding-right: 0.5em;
}
#menu li a, #menu li a:visited {
    color: #fff;
    font-size: 15px;
}

#content {
    padding: 0em 1em 0.5em 1em;	
}	

#content p img {
    max-width: 100% !important;
    max-height: 600px; /*avoid portrait smartphone screenshots becoming too big*/
    height: auto;
}

#footer {
    margin: 1.5em 0 2.5em 0;
    border-top: 1px solid #BBB;
    padding: 1em;
    color: #AAA;
    text-align: center;
}
#footer a, #footer a:visited {
    color: #AAA;
}


/* rough layout: desktop second 
*******************************************************************************/

.desktoponly { display: none; }

@media only screen and (min-width: 640px) {
    body {
        padding-top: 0px;
    }
    #menu {
        padding: 2em 1em 2em 1em;
    }
    #menu li {
	padding-right: 1.0em;
    }
    #menu li a, #menu li a:visited {
        /*font-size: 17px;*/
    }	
    #content {	   
        margin: 0 auto;
        width: 75%;
        min-width: 580px;
        max-width: 800px;
    }
    #footer {
        padding: 2em;
    }	

    .nodesktop { display: none; }
    span.desktoponly, i.desktoponly, b.desktoponly { display: inline !important; }
    div.desktoponly, p.desktoponly { display: block !important; }
}


/* colors etc. 
*******************************************************************************/



/*space between content elements*/
#content p, #content ul, ol, h1, h2 {
    margin: 1em 0;
}

h1:not(:first-child), h2:not(:first-child) {
    margin-top: 2em;
}

p.menulike { /* eg. prev/next links */
	margin-top: 2em !important;
}

p.blogdate {
	margin-bottom: 2em !important;
	font-style: italic;
}

/*colors*/

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7em;
    color: #000;
}

#content ul, ol { margin-left: 1.5em; }
#content ul li { list-style: disc outside; margin: 0.5em 0.2em; padding-left: 0.5em; }
ol li { list-style: decimal; margin: 0.5em 0.2em; padding-left: 0.5em; }

h1 { font-weight: normal; font-size: 24px; letter-spacing: 1px; line-height: 1.4em; color: #000; }
h2 { font-weight: bold; font-size: 16px; letter-spacing: 1px; color: #159957; }

a, a:visited {
    /*color: #0063DC;*/
    color: #1e6bb8;
    text-decoration: none;
}

a:hover {
    /*color: #0063DC;*/
    color: #1e6bb8;;
    text-decoration: underline;	
}

code, pre, blockquote { background-color: #eee; }
pre, blockquote { padding: 0.5em 1em; }


#content table td, #content table th { border: 1px solid #ccc; padding: 0.2em 0.4em; }
#content table th { background-color: #eee; font-weight: bold; }

#content hr { border: 1px solid #ddd; margin: 2em 0; }


.feed {
  margin-left: 9px;
  padding: 0 0 0 21px;
  background: url(feed-icon.png) no-repeat 0 50%;
}

.friendica {
  margin-left: 9px;
  padding: 0 0 0 21px;
  background: url(friendica-icon.png) no-repeat 0 50%;
}

.twitter {
  margin-left: 9px;
  padding: 0 0 0 21px;
  background: url(twitter-icon.png) no-repeat 0 50%;
}