html {
	font-size: 16px;
}

body {
	margin: 0;
	background-color: #b99bc8;
	font-size: 16px;
    color: #533562;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url("../images/brndtilegrad.gif");
	background-attachment: fixed;
}

h1, h2, h4, h6  {
padding: 0;
margin: 0;
}

:focus {
outline: thick dashed #f82;
}

a:focus {
opacity: .85;
outline: 3px dashed #311340;
background-color: #d9bbe8;

}

/* Page Wide - 768  Style */
@media screen and (max-width: 768px) {
	body {
background-attachment: scroll;}
}
/* END - Page Wide - 768  Style */

/* END - Pagewide Style  */


/* NAV - Base Style - 315 px wide - 50 px tiles, 150 px tall - 3 row - @ em=10px */

#navcontainer {
margin: .5em 1em;
width: 26.5em;
height: 15em;
min-height: 15em;
min-width: 26.5em;
}

#navcontainer a:focus {
outline: 0px;
opacity: .75;
border-bottom: 4px dashed #311340;
border-left: 4px solid #311340;
background-color: #d9bbe8;
position: relative;
left: -4px;
border-radius: 0 0 0 10px;
}

.logoline {
float: left;
}

.choicedisplay {
float: left;
}

#logocolor {
width: 25em;
height: 5em;
margin: 0 6.5em 0 0;
}
 
#logoin {
width: 10em;
height: 5em;
margin: 0 0 0 2em;
}

#choicedisplay {
width: 13.5em;
height: 5em;
margin: 0 0 0 1em;
opacity: .8;
}

#logoabletmcom {
width: 26.5em;
height: 5em;
margin: 0 0 0 0;
}

.tile {
float: left;
width: 5em;
height: 5em;
opacity: 0.9;
}

.tile a:hover {
opacity: .7;
}

.choicedisplay img {
float: left;
}

#choiceletter {
width: 5em;
}

#choicetxt {
width: 7.5em;
opacity: .8;
}

#tmtile {
width: 0;
height: 3em;
vertical-align: top;
position: relative;
right: 6.8em;
top: 0;
}

#comtile {
width: 6.5em;
height: 5em;
vertical-align: bottom;
position: relative;
right: 0;
top: 0;
}

#TMbut {
width: 3em;
height: 3em;
}

.buttontxt {
position: relative;
right: -2.75em;
top: -1.75em;
width: 2.75em;
height: 2.5em;
opacity: 0.8;
}

#l1txt, #itxt, #l2txt, #etxt {
right: -2.5em;
}

#rtxt {
right: -3.25em;
}

#etxt {
height: 2em;
top: -2em;
}

/* END - NAV Base Style */



/*  NAV - 768 Style - 50 px tiles, 615 px wide, 50px tall - 1 row  - @ em=10px  */

@media screen and (max-width: 768px) {

#navcontainer {
margin: 1em .5em;
width: 61.5em;
height: 5em;
min-height: 5em;
min-width: 61.5em;
}

.logoline {
float: left;
}

.choicedisplay {
float: left;
}

#logocolor {
width: 25em;
height: 5em;
margin: .2em 0 0 0;
}
 
#logoin {
width: 10em;
height: 5em;
margin: .2em 0 0 0;
}

#choicedisplay {
width: 0em;
height: 0em;
margin: 0 0 0 0;
}

#logoabletmcom {
width: 26.5em;
height: 5em;
margin: .2em 0 0 0;
}

.tile {
float: left;
width: 5em;
height: 5em;
opacity: 0.9;
}

.choicedisplay img {
float: left;
}

#choiceletter {
width: 0;
}

#choicetxt {
width: 0;
}

#tmtile {
width: 0em;
height: 3em;
vertical-align: top;
position: relative;
right: 6.8em;
top: 0;
}

#comtile {
width: 6.5em;
height: 5em;
vertical-align: bottom;
position: relative;
right: 0;
top: 0;
}

#TMbut {
width: 3em;
height: 3em;
}

.buttontxt {
position: relative;
right: -3em;
top: -2.5em;
width: 0;
height: 0;
opacity: 0.6;
}

#l1txt, #itxt, #l2txt, #etxt {
right: -3em;
}

#rtxt {
height: 4em;
top: -4.35em;
right: -3.5em;
}

#etxt {
height: 2em;
top: -2em;
}

}
/* END - NAV - 768 Style */



/* NAV - 480 Style - 315 px wide - 50 px tiles, 150 px tall - 3 row - @ em=10px */

@media screen and (max-width: 480px) {

#navcontainer {
margin: 1em .5em;
width: 26.5em;
height: 15em;
min-height: 15em;
min-width: 26.5em;
}

.logoline {
float: left;
}

.choicedisplay {
float: left;
}

#logocolor {
width: 25em;
height: 5em;
margin: 0 6.5em 0 0;
}
 
#logoin {
width: 10em;
height: 5em;
margin: 0 0 0 2em;
}

#choicedisplay {
width: 13.5em;
height: 5em;
margin: 0 0 0 1em;
}

#logoabletmcom {
width: 26.5em;
height: 5em;
margin: 0 0 0 0;
}

.tile {
float: left;
width: 5em;
height: 5em;
opacity: 0.9;
}

.choicedisplay img {
float: left;
}

#choiceletter {
width: 5em;
}

#choicetxt {
width: 7.5em;
}

#tmtile {
width: 0;
height: 3em;
vertical-align: top;
position: relative;
right: 6.8em;
top: 0;
}

#comtile {
width: 6.5em;
height: 5em;
vertical-align: bottom;
position: relative;
right: 0;
top: 0;
}

#TMbut {
width: 3em;
height: 3em;
}

.buttontxt {
position: relative;
right: -2.75em;
top: -2.25em;
width: 0;
height: 0;
opacity: 0.6;
}

#l1txt, #itxt, #l2txt, #etxt {
right: -3em;
}

#rtxt {
height: 4em;
top: -4.35em;
right: -3.5em;
}

#etxt {
height: 2em;
top: -2em;
}

}
/* END - NAV - 480  */



/* NAV - 376 Style - 315 px wide - 50 px tiles, 150 px tall - 3 row - @ em=10px */

@media screen and (max-width: 376px) {

#navcontainer {
margin: 1em .5em;
width: 26.5em;
height: 15em;
min-height: 15em;
min-width: 26.5em;
}

.logoline {
float: left;
}

.choicedisplay {
float: left;
}

#logocolor {
width: 25em;
height: 5em;
margin: 0 6.5em 0 0;
}
 
#logoin {
width: 10em;
height: 5em;
margin: 0 0 0 2em;
}

#choicedisplay {
width: 13.5em;
height: 5em;
margin: 0 0 0 1em;
}

#logoabletmcom {
width: 26.5em;
height: 5em;
margin: 0 0 0 0;
}

.tile {
float: left;
width: 5em;
height: 5em;
opacity: 0.9;
}

.choicedisplay img {
float: left;
}

#choiceletter {
width: 5em;
}

#choicetxt {
width: 7.5em;
}

#tmtile {
width: 0;
height: 3em;
vertical-align: top;
position: relative;
right: 6.8em;
top: 0;
}

#comtile {
width: 6.5em;
height: 5em;
vertical-align: bottom;
position: relative;
right: 0;
top: 0;
}

#TMbut {
width: 3em;
height: 3em;
}

.buttontxt {
position: relative;
right: -2.75em;
top: -2.25em;
width: 0;
height: 0;
opacity: 0.6;
}

#l1txt, #itxt, #l2txt, #etxt {
right: -3em;
}

#rtxt {
height: 4em;
top: -4.35em;
right: -3.5em;
}

#etxt {
height: 2em;
top: -2em;
}

/* END - NAV - 376 Style */
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* header 1 DIV BASE Style */

h1 {
font-size: 1.85em;
margin: .2em 1em;
}

#header1 {
width: auto;
text-align: right;
background-color: #a98bb8;
margin: 0 1em;
padding: 0;
border: .1em solid #311340;
border-radius: 25px;
color: #d9bbe8;
}

.header span {
font-size: 95%;
background-color: #c9abd8;
padding: .15em;
border: .1em solid #311340;
border-radius: 10px;
color: #432552;
line-height: 1.5em;
}

.stuff {
float: right;
margin: .5em 4% 0 5px;
width: 63%;
}

.stuffitem {
width: 45%; !97%;
background-color: #c9abd8;
border: .2em solid #311340;
border-radius: 10px;
padding: .3em;
margin: .5em .1em;
font-family: 'Patua One', Verdana, Arial, sans-serif;
float: left;
}

.stuffitem a {
color: #533562;
}

.stuffitem a:hover {
background-color: #e9cbf8;
display: block;
opacity: .5;
}

#stuffclassic img, #stuffciaorg img {
width: 100%;
}

/*
#stuffheadline {
font-size: 1.5em;
background-color: #e9cbf8;
}

#stuffheadline h2 span {
font-size: 1em;
}

#stuffheadline h2 a {
font-size: 0;
margin: 0;
padding: 0;
height: 0;
width: 0;
}

#stuffheadline p {
position: relative;
top: -1em;
}

#stuffheadline h3 {
position: relative;
top: -1em;
margin-top: 0;
margin-bottom: 0;
}
*/

/* END - header 1 DIV BASE Style */


/* STUFF SCALE - 768+ */

@media screen and (max-width: 1023px) {
.stuff {
width: 59%;
margin-right: 5%;
}
}

@media screen and (max-width: 900px) {
.stuff {
width: 54%;
margin-right: 4%;
}
}
/* END - STUFF SCALE - 768+ */


/* header 1 DIV - 768 */

@media screen and (max-width: 768px) {

h1 {
font-size: 1.5em;
margin: .2em 1em;
}


#header1 {
width: auto;
text-align: right;
background-color: #a98bb8;
margin: 0 1em;
padding: 0;
border: .1em solid #311340;
border-radius: 20px;
color: #e9cbf8;
}

.header span {
font-size: 85%;
background-color: #d9bbe8;
padding: .1em;
border: .1em solid #311340;
border-radius: 10px;
color: #432552;
}

}
/* END - header 1 DIV - 768 */

/* header 1 DIV span - 560 */
@media screen and (max-width: 560px) {
.header span {
font-size: 70%;
padding: .15em;
border: .15em solid #311340;
border-radius: 10px;
color: #432552;
}
}
/* END - header 1 DIV span - 560 */


/* STUFF SCALE - 481 -  768 */
@media screen and (max-width: 768px) {
.stuff {
width: 63%;
margin-right: 3%;
}

.stuffitem {
width: 43%;
font-size: 90%;
}
/*
#stuffheadline {
font-size: 1em;
}
*/
}

@media screen and (max-width: 715px) {
.stuff {
width: 60%;
margin-right: 3%;
}
}

@media screen and (max-width: 665px) {
.stuff {
width: 57%;
margin-right: 4%;
}
}

@media screen and (max-width: 620px) {
.stuff {
width: 54%;
margin-right: 4%;
}
}

@media screen and (max-width: 580px) {
.stuff {
width: 51%;
margin-right: 4%;
}

.stuffitem {
	border: .1em solid #311340;
margin: .5em 0;
float: none;
width: 97%;
font-size: 100%;
}
}

@media screen and (max-width: 550px) {
.stuff {
width: 48%;
margin-right: 4%;
}
}

@media screen and (max-width: 510px) {
.stuff {
width: 42%;
margin-right: 6%;
}
}

/* END - STUFF SCALE - 481 -  768 */

/* header 1 DIV - 480 */

@media screen and (max-width: 480px) {

h1 {
font-size: 1.5em;
margin: .1em .5em;
text-align: center;
}

#header1 {
width: 25em;
text-align: left;
!background-color: #c9abd8;
margin: 0 .75em;
padding: 0;
border: .15em solid #311340;
border-radius: 10px;
!color: #432552;
}

.header span {
font-size: 95%;
!background-color: #c9abd8;
padding: 0;
!border: 0 solid #311340;
!border-radius: 0;
color: #432552;
display: block;
line-height: 1.25em;
}

.stuff {
width: 46%;
margin: 1em 4% 0 auto;
}

}
/* END - header 1 DIV - 480 */




/* STUFF SCALE 377 - 475 */

@media screen and (max-width: 475px) {
.stuff {
width: 39.25%; 
}
}

@media screen and (max-width: 410px) {
.stuff {
width: 35%; 
}
}
/* END - STUFF SCALE 377 - 475 */


/* header 1 DIV - 376 */

@media screen and (max-width: 376px) {

h1 {
font-size: 1.5em;
margin: .1em .3em;
}

#header1 {
width: 17.5em;
text-align: left;
margin: 0 1em;
padding: 0;
border: .15em solid #311340;
border-radius: 5px;
!color: #432552;
}

.header span {
font-size: 75%;
padding: 0;
!border: 0 solid #311340;
!border-radius: 0;
color: #432552;
}

.stuff {
position: relative;
float: left;
display: block;
margin: 1em auto 0 1em;
width: 17.5em;
}

/*
#stuffheadline h2 span {
font-size: 0;
margin: 0;
padding: 0;
height: 0;
width: 0;
}

#stuffheadline h2 a {
font-size: 1em;
position: relative;
top: -2em;
width: auto;
height: auto;
display: block;
padding: .1em;
border-radius: 5px;
background-color: #c9abd8;
border: .1em solid #311340;
}

#stuffheadline h2 a:hover {
font-size: 1em;
position: relative;
top: -2em;
width: auto;
height: auto;
background-color: #fff;
}

#stuffheadline h3 {
position: relative;
top: -1.5em;
}

#stuffheadline h3 span {
display: none;
}

#stuffheadline p {
position: relative;
top: -3em;
}

#stuffheadline {
!height: auto;
}
*/
}
/* END - header 1 DIV - 376 */

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* Menu BASE Style */

.menu {
position: relative;
right: 4em;
width: 20em;
}

.menu a {
text-decoration: underline;
color: #533562;
background-color: none;
display: block;
height: 3em;
padding: 3px;
}

.menu a:hover {
background-color: #d9bbe8;
opacity: .75;
border-radius: 10px;
}

.menu a:visited {
color: #311340;
}

.menu li {
height: 3em;
width: 17em;
margin: .4em;
list-style-type: none;
    background: linear-gradient(90deg, #a98bb8, #a98bb8 19%, #c9abd8 21%, #c9abd8 100%);
	!background-color: #c9abd8;
border: .1em solid #311340;
border-radius: 10px;
padding: .3em;
}

.menu li img {
height: 3em;
width: 3em;
}

.menu h2 {
position: relative;
top: -1.5em; 
right: -1.75em; 
font-size: 2em;
}
#menuitemi h2 {
	font-size: 1.9em;
}

/* END - Menu BASE style */


/* MENU - 768 */

@media screen and (max-width: 768px) {

.menu {
position: relative;
right: 4em;
width: 15em;
}

.menu a {
text-decoration: none;
color: #533562;
background-color: none;
display: block;
height: 2.5em;
}

.menu a:hover {
background-color: #d9bbe8;
}

.menu a:visited {
color: #311340;
}

.menu li {
height: 2.5em;
width: 12em;
margin: .2em;
list-style-type: none;
background-color: #c9abd8;
border: .2em solid #311340;
border-radius: 10px;
padding: .2em;
}

.menu li img {
height: 2.25em;
width: 2.25em;
}

.menu h2 {
position: relative;
top: -1.5em;
right: -1.6em;
font-size: 1.45em;
}

#menuitemi h2 {
	font-size: 1.3em;
}

}
/* END - MENU - 768 */

/* MENU - 480 */

@media screen and (max-width: 480px) {

.menu {
position: relative;
right: 4.75em;
width: 15em;
}

.menu a {
text-decoration: none;
color: #533562;
background-color: none;
display: block;
height: 2.5em;
}

.menu a:hover {
background-color: #d9bbe8;
}

.menu a:visited {
color: #311340;
}

.menu li {
height: 2.5em;
width: 12em;
margin: .2em;
list-style-type: none;
background-color: #c9abd8;
border: .2em solid #311340;
border-radius: 10px;
padding: .2em;
}

.menu li img {
height: 2.25em;
width: 2.25em;
}

.menu h2 {
position: relative;
top: -1.5em;
right: -1.6em;
font-size: 1.35em;
}

#menuitemi h2 {
	font-size: 1.2em;
	position: relative;
	left: 1.8em;
}

}
/* END - MENU - 480 */

/* MENU - 376 */

@media screen and (max-width: 376px) {

.menu {
float: left;
position: relative;
right: 4.5em;
width: 17.5em;
}

.menu a {
text-decoration: none;
color: #533562;
background-color: none;
display: block;
height: 2.5em;
}

.menu a:hover {
background-color: #d9bbe8;
}

.menu a:visited {
color: #311340; 
}

.menu li {
height: 2.5em;
width: 17em;
margin: .2em;
list-style-type: none;
background: linear-gradient(90deg, #a98bb8, #a98bb8 16%, #c9abd8 18%, #c9abd8 100%);
border: .2em solid #311340;
border-radius: 10px;
padding: .3em;
}

.menu li img {
height: 2.5em;
width: 2.5em;
}

.menu h2 {
position: relative;
top: -1.35em;
right: -1.5em;
font-size: 2em;
}

#menuitemi h2 {
	font-size: 1.9em;
		left: 1.5em;
}

}
/* END - MENU - 376 */



/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */



/* FOOTER - This is a PAGEWIDE STYLE */

.footer {
float: left;
background-color: #a98bb8;
display: overflow;
height: 3em;
width: 100%;
margin: 0;
padding: 0;
}

.footmenu {
float: left;
margin: 0 1.5em;
background-color: #c9abd8;
border: .2em solid #311340;
border-radius: 5px;
width: 7em;
}

.footmenu h6 {
font-size: 2em;
margin: 0 .2em;
}

.footmenu a {
text-decoration: none;
color: #533562;
background-color: none;
display: block;
}

.footmenu a:hover {
background-color: #d9bbe8;
}

.footmenu a:visited {
color: #311340;
}

.cright {
float: right;
margin: .5em 1em;
text-align: right;
font-family: Georgia, Times, serif;
}

.cright h4 {
font-size: 1.5em;
}

.cright h4:before {
    content: "\A9 2023 ";
}