@import  "menu.css";


h1 { color: yellow; font-weight: 600; }
h2 { color: yellow; font-weight: 500; }
h2 a { color: inherit; }
h2 a:hover {color: inherit; text-decoration: none; }
.yellow { color: yellow; }

    
#body {
    overflow-x: hidden;
    background-color: whitesmoke;
}

a { color: yellow; }

a:hover { color: magenta; }

.container { background: #34343e; }

.content {
    background-color:  #37333C;
    margin-bottom: 25px;
}

.contentLeft {
    width: 50%;
    float: left;
    background-color: #C7B596;
    vertical-align: middle;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.contentLeftText {
    width: 50%;
    float: left;
    background-color: #C7B596;
    vertical-align: middle;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: black;
    font-weight: 500;
    font-size: 1.2em;
    padding: 0 5%;
}

.contentLeft img {
    border: white 10px solid;
    display: block;
    margin: 10px auto;
    width: 80%;
    vertical-align: middle;
    background-color: white; /*png transparency background colour*/
}

.contentRight {
    width: 50%;
    float: right;
    color: white;
    font-size: 1.2em;
    padding: 0 5%;
    background-color: #37333C;
}

.contentRight p { padding-bottom: 5px; }



/*Photos*/
.Photos {
    overflow-y: scroll;
    height: 1000px;
}

.Photos a {
    color: black;
    vertical-align: middle;
    align-items: center;
    padding: 7px;
}

.Photos img {
    border: white 4px solid;
    vertical-align: middle;
    width: 100px;
    height: 75px;
}


#loadArea {
    font-size:  1.3em;
    letter-spacing: 5px;
    font-style: italic;
    font-weight: 100;
    color: yellow;
    margin-bottom: 25px;
}

#loadArea img {
    width: 100%;
    font-size:  2em;
}



/*FAQ*/
.FAQ-Q {
    color: yellow;
    font-weight: bold;
    padding-top: 50px;
    padding-bottom: 15px;
}

.FAQ-Q::before {
    content: "Q...\a0\a0";
}

.FAQ-A::before {
    content: "A...\a0\a0";
    color: yellow;
    font-weight: bold;
}
/**/



#RoscherLogo {
    margin: 0 auto;
    width: 50%;
    padding-bottom: 15px;   
}

.SuperBold {
    font-weight: 900;
    font-style: oblique;
    letter-spacing: .1em;
    word-spacing: .2em;
}

.boldRed {
	font-weight: bold;
	color: red
}

.centerGreyItalics {
	font-style: italic;
	text-align: center;
	color: #CCC
}

.boldCyan {
	font-weight: bold;
	color: cyan;
}

.boldYellow {
	font-weight: bold;
	color: yellow;
}

.imgdistribution {
	display: table;
	width: 100%;
	margin: 0px auto
}

.imgdistribution a {
	display: table-cell;
	text-align: center;
	width: 16%;
	font-style: italic;
	color: #CCC;
	padding: 1%
}

.imgdistribution a:hover {
    background-color: yellow
}

.imgdistribution img {
	width: 100%;
	max-width: 200px;
	page-break-after: 10px
}

.h100mw100 {
	height: 100px;
	max-width: 100%
}

.h100w50 {
	height: 100px;
	max-width: 100%
}
.h100pad10white {
	height: 100px;
	background-color: white;
	padding: 10px
}

.olBrackets { list-style: none }
.olBrackets li { counter-increment: item }
.olBrackets li:before {
	content: counter(item) ")";
	padding: 0px 20px 0px 20px
}


#HomeMain { padding: 30px 20px }

#HomeMain img {
	color: white;
	font-size: xx-large;
	text-align: center;
	border: thick;
	border-style: solid;
	border-color: white;
	margin-bottom: 20px;
}

.text-1 {
	color: white;
	font-size: larger
}