body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #000;
	margin: 0;
	padding: 0;
	color: #F6F6F6;
}
 a:link {color: red;font-weight:bold;text-decoration:none;text-transform: uppercase;}
a:visited {color: white;}
a:hover {color: white}
a:active {color: yellow;} 
.nasty {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
	text-align:center;
  	width:300px;max-height: 135px;
	background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    white-space: normal;
    overflow: hidden;
}
.nasty p{max-width: 320px;white-space:unset;}
.oneOff {
	float:left;
    clear:none;
	background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
.box {
	background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:0px;
	display: block;
	border:1px #000000;
}
.alt {
	background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
	border-style: solid;
    border-width: 3px;
    border-color: red;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:0px;
	display: block;
}
.fl {float:left}
.fr {float:right}
.m img{display: block;margin-left:auto;margin-right:auto;}
.icon img{border-radius:4px; padding-left:4px;max-height:120px;}
.ticon{position: relative;}
.min {min-height:75px}
.mw {max-width: 330px;}
.bar {display:block;background: rgba(255, 0, 0, 0.7);color:rgb(211, 209, 209);border-radius: 10px;padding:1rem}
.bar a:link {color: rgb(241, 241, 241);}
.bar a:visited {color: white;}
.bar a:hover {color: white;}
.bar a:active {color: yellow;} 
.h {display:none;}
.sm{font-size:small}
.cb{clear:both}
.cl{clear:left}
.oneOff h1 {margin:0px;padding:0px;}
.abs{position:reative;top:5px;left:5px; z-index:1}
.header{white-space: nowrap;height:160px;overflow:hidden;}
.contWrap {
	background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
#mainHeader{
    margin-top:0px;
    height:150px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-style: solid;
    border-width: 6px;
    border-color: red;
	padding:5px;
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3px;
    overflow: hidden;
 }
#mainHeader h1 {font-size:medium}
#mainHeader p {font-size:small;text-align: center;}
#mainBody{
    overflow:hidden;
	padding:5px;
	  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  clear:both;
}
#mainBody img {
    max-width:100%;
    height:auto;
}
address {
    margin: auto;
    text-align: center;
    width: auto;
}
/* grid container */
.spong {
	background:url(../images/back/volcano.jpg);
	background-repeat: no-repeat;
  	background-size: cover;
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}
.spongFull {
	background:url(../images/back/volcano.jpg);
	background-repeat: no-repeat;
  	background-size: cover;
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'footer';
}
.spongRight {
	background:url(../images/back/volcano.jpg);
	background-repeat: no-repeat;
  	background-size: cover;
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'right-sidebar'
        'footer';
}

/* general column padding */
.spong > * {
    padding-left:1rem;
    padding-right:1rem;
    padding-top:0px;
    padding-bottom:1rem;
}
.spongRight > * {
    padding-left:1rem;
    padding-right:1rem;
    padding-top:0px;
    padding-bottom:1rem;
}


/* assign columns to grid areas */
.spong > .header {
    grid-area:header;
    overflow:hidden;
	background: rgba(0, 0, 0, 0.6);
}
.spongRight > .header {
    grid-area:header;
    overflow:hidden;
	background: rgba(0, 0, 0, 0.6);
}
.spong > .main-content {
    grid-area:main-content;
}
.spongRight > .main-content {
    grid-area:main-content;
}
.spong > .left-sidebar {
    grid-area:left-sidebar;
}
.spong > .right-sidebar {
    grid-area:right-sidebar;
}
.spongRight > .right-sidebar {
    grid-area:right-sidebar;
}
.spong > .footer {
    grid-area:footer;
    background: rgba(0, 0, 0, 0.6);
}
.spongRight > .footer {
    grid-area:footer;
    background: rgba(0, 0, 0, 0.6);
}

/* tablet breakpoint */
@media (min-width:768px) {
    .spong {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .spong {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
    .spongRight {
        grid-template-columns:repeat(4, 1fr);
        grid-template-areas:
        'header header header header'
        'main-content main-content main-content right-sidebar'
        'footer footer footer footer';
    }
	#mainHeader{height:100px}
    .icon img{max-height:70px;}
	/*#mainHeader img {max-height:60px}*/
	.header{height:80px;overflow:hidden;}
	.header img{height:75px}
    .h {display:block;}
}
.cycle-prev{ left:5px;z-index:101;font-size:xx-large;clear:none;position:absolute;top:50%;font-weight:bold;color:#F00;}
.cycle-next{ right:5px;z-index:101;font-size:xx-large;clear:none;position:absolute;top:50%;font-weight:bold;color:#F00;}