/*link-Farbe RGB-braun-#a98561*/

/*grau Farbe, um wichtige Abschnitte zu unterlegen: #dee3e8*/

/* Font: arial
/* <h1 style="font-family:verdana">This is a heading</h1>*/
/*<p style="font-family:courier">This is a paragraph.</p>*/
/*<h1 style="text-align:center">Centered Heading</h1>*/


/* MEDIA QUERY*/

@media (min-width:750px){
    .responsive {
        display:inline-block;
        text-align:center;
        width: 130px;
        }
}
@media (min-width:1000px){
    .responsive {
        display:inline-block;
        
        width: 150px;
        }
}


body {
background: white;
text-align: centre;

}

/*body {
	background-color: #e6e6e6;
}
body.custom-background-empty {
	background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
*/
/* LINKS*/

/*funktioniert noch nicht, warum
.link_sans_background_hover {
background:white;
}
ICh muss meinen hover zu einer extra classe machen und aktiv anwenden, nicht automatisch, wenn ich es brauche.
*/

/*When hovering display a gray colour in the background to indicate, that it is a link, change text colour to black*/

a:hover.link_hover{
text-decoration: none;
color: black;
background:#dee3e8;
}
a:color.link_color { color: #a98561;}

a {  
font-family: arial, verdana, sans-serif; text-decoration: none; color: #a98561; size:12pt;
}

a:visited {  
text-decoration: none; 
color: #grey;
background:#dee3e8;}

/*FONTS-----------------------------------*/

h1, h2, h3, h4, h5, h6, p, li, ul, ol {
font-family:arial, verdana, sans-serif;
}

/*Use different colour for certain headlines*/

h4, h5, h6 {
color:grey
}
p, ul, li, ol {
font-size:10pt;
}

/*BORDERS--------------------------------------------------*/
/* use this to put borders around things... */
.thin_border{
	border: 1px #dee3e8;
	}


/*IMAGES*/

/* body {  background: #FFF url("../medien/images/header.jpg") no-repeat scroll right top / 620px auto;
        background-color: #FFF;
        background-image: url("../medien/images/header.jpg");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right top;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: 620px auto;
    position: relative;
} */

/*CROPPED IMAGE*/

.crop-img{
  max-height:90px;
  max-width:80%;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 3px;
}

/*LARGE IMAGE*/

.large-img{
  max-width:100%;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
}

/*IMAGE POSITION LEFT*/
.left {
    position: absolute;
    left: 0px;
    width: 160px;
    height: 160px;
    border: 1px;
    padding: 10px;
    
}

/* CHAPTER STYLES------------------------------------------------*/

.chapter-thumbnail {
  margin-top: 6 px;   /* add a margin to look nice */
 /* white-space : pre;   preserve the original line breaks and spacing
  						 (I need this because the content of the 
  						 chapter is just text not HTML, so normally
  						 the line breaks would be ignored) */
  overflow : hidden;  /* don't show a scroll bar when the text is
                         too big to fit in the box (which it always 
                         will be but we don't mind as it is just a 
                         thumbnail) */
  max-height: 130px;  /* make sure that the box doesn't get too big */
  height : 130px;     /* even if the text is big */
  border-radius: 10px;/* rounded corners */ 
}

#mainViewer {
  margin-top: 6px;   
  /*white-space : pre;   preserve the original line breaks (see above)*/
}