@import url('https://infamous.net/fonts/djv/djv.css');
@import url('https://paws.infamous.net/paws.css');



/* defined style classes:

   logotext, smlogotext, leftnav, rightnav, sans, serif, mono, quote, large,
   small, alert, warning, notice, note, fineprint, caption 

*/

/*
  Text Colors 
 */
#all {color: black;} 
#all
{
   margin-right: auto;
   margin-left: auto;
   max-width:900px;
   margin-top:10px; /* matches -10 px below */
}


a {text-decoration: none; border-bottom: 1px dotted}

#left {color: #ffffff}
a.leftnav:link {color: #00ff00; text-decoration: none; border-bottom: none}
a.leftnav:active {color: #FF00FF}
a.leftnav:visited {color: #00ff00; text-decoration: none; border-bottom: none }

#right {color: #ffffff}
a.rightnav:link {color: #00ff00; text-decoration: none; border-bottom: none}
a.rightnav:active {color: #FF00FF}
a.rightnav:visited {color: #00ff00; text-decoration: none; border-bottom: none}

a.mobilenav:link {color: #0000cc; text-decoration: none; border-bottom: 0}
a.mobilenav:active {color: #FF00FF}
a.mobilenav:visited {color: #0000cc; text-decoration: none; border-bottom: 0}


/*
  Fonts 
 */

#all
{
  /* Use a 12px base font size with a 16px line height */
  /* font-size: 0.75em; /* 16px x .75 = 12px */
  /* line-height: 1.333em; /* 12px x 1.333 = 16px */

  /* Use a 14px base font size with a 18px line height */
   font-size: 0.875em; /* 16px x .875 = 14px */
   line-height: 1.286em; /* 14px x 1.286 = 18px */

  /* font-size: 0.8125em; /* 16px x .875 = 14px */
  /* line-height: 1.3095em; /* 14px x 1.286 = 18px */

   font-family: dejavu_sans, sans-serif;
}
/* -- borders */
/* #head {border: 3px blue groove;} */


/* the body background here is the color of the pillarbox matte, #all is
   the background of the rest of things*/

#all {background: white;}
body {background: white /* 	#993300; */}




/* wrap contains all sections except #top and #bottom, 
   without some sort of tricks, #wrap will not be visible */
#wrap {background: white;}


/* -- other decls */

#top {  margin-top:10px;  }


.redsticker {border: thin grey outset; color: red; font-weight: bold;
             margin: 2em; padding: 0.5em}

.logotext {font-style: italic}
.logotext, .smlogotext {font-weight:bold}
.logotext {/*font-size: 105%;*/ line-height: 1.286em }
.smlogotext, .fineprint, .caption, .note {font-size: 0.9em;  line-height: 1.286em}
.logotext,.smlogotext {color:blue}
img.header {max-width: 100%}








/* -- backgrounds */

#left {background: #333366}
#right {background: #333366}
#bottom {background: #ffffff;}
/* #right {background: #99ccff} */

/* -- widths and x-position */
#right {width: 12em; padding-left: 1ex; padding-right: 1ex; 
        padding-top: 1ex; padding-bottom: 1ex; float:right;}
#head {width: 95%; margin-left: auto; margin-right: auto;}
/*#top {padding-left: 1ex; padding-right: 1ex;}
#bottom {padding-left: 1ex; padding-right: 1ex;}*/

body #main {/*margin-left: 18ex; */
            margin-right: 12em; }

/* -- other decls */


#left, #right, #main { margin:0px;}

#top { clear: both; margin-top:10px; margin-bottom: 0px;}
/*
#bottom { /* clear handled by <br> in body - NS 4 work-around 
 margin-top: 1em;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
*/


.redsticker {border: thin grey outset; color: red; font-weight: bold;
             margin: 2em; padding: 0.5em}


input[type=radio], input[type=checkbox]{/* margin-left: -2em;*/ color: blue; border: 1px #330000; height: 1em; width: 1em;  background: yellow}


.purchase-form-radioset {border: thin grey outset; margin-top: 2em; margin-bottom: 2em}
.purchase-form-textnote, .purchase-form-radionote { font-size: 0.9em;  line-height: 1.286em; color: gray}

.spinner-animation {
  color: #0000ff; 
  border-width: 2px; border-style: solid;
  border-color: #0000ff #ff00ff #ff0000 #ff00ff;
  padding: 0.5em;

  -webkit-animation: spinner 1s infinite;
  -moz-animation: spinner 1s infinite;
  -o-animation: spinner 1s infinite;
  -ms-animation: spinner 1s infinite;
  animation: spinner 1s infinite;
}

@keyframes spinner {
    0%, 100% { border-color: #0000ff #ff00ff #ff0000 #ff00ff; color: #0000ff; }
         25% { border-color: #ff00ff #0000ff #ff00ff #ff0000; color: #ff00ff;}
         50% { border-color: #ff0000 #ff00ff #0000ff #ff00ff; color: #ff0000;  }
         75% { border-color: #ff00ff #ff0000 #ff00ff #0000ff; color: #ff00ff; }
}

@-webkit-keyframes spinner {
    0%, 100% { border-color: #0000ff #ff00ff #ff0000 #ff00ff; color: #0000ff; }
         25% { border-color: #ff00ff #0000ff #ff00ff #ff0000; color: #ff00ff;}
         50% { border-color: #ff0000 #ff00ff #0000ff #ff00ff; color: #ff0000;  }
         75% { border-color: #ff00ff #ff0000 #ff00ff #0000ff; color: #ff00ff; }
}

@-moz-keyframes spinner {
    0%, 100% { border-color: #0000ff #ff00ff #ff0000 #ff00ff; color: #0000ff; }
         25% { border-color: #ff00ff #0000ff #ff00ff #ff0000; color: #ff00ff;}
         50% { border-color: #ff0000 #ff00ff #0000ff #ff00ff; color: #ff0000;  }
         75% { border-color: #ff00ff #ff0000 #ff00ff #0000ff; color: #ff00ff; }
}

@-ms-keyframes spinner {
    0%, 100% { border-color: #0000ff #ff00ff #ff0000 #ff00ff; color: #0000ff; }
         25% { border-color: #ff00ff #0000ff #ff00ff #ff0000; color: #ff00ff;}
         50% { border-color: #ff0000 #ff00ff #0000ff #ff00ff; color: #ff0000;  }
         75% { border-color: #ff00ff #ff0000 #ff00ff #0000ff; color: #ff00ff; }
}

@-o-keyframes spinner {
    0%, 100% { border-color: #0000ff #ff00ff #ff0000 #ff00ff; color: #0000ff; }
         25% { border-color: #ff00ff #0000ff #ff00ff #ff0000; color: #ff00ff;}
         50% { border-color: #ff0000 #ff00ff #0000ff #ff00ff; color: #ff0000;  }
         75% { border-color: #ff00ff #ff0000 #ff00ff #0000ff; color: #ff00ff; }
}