/*  ==============================================================   */
/*  Diron Graphics & Web Design d/b/a Distinct Graphics & Web Design */
/*                Diane Dickler, Web Designer                        */
/*                for www.keyboardwiz.com : Gary Piacentini          */
/*  ==============================================================   */

/*  ***************   This explains on how all the links will react within your website.
     The colors, background, underlining, etc. All the formatting with the links.***********     */
a:link {
    color: #3300FF;
    background-color: transparent;
    font-weight: bold;
	text-decoration: none;
}
a:visited {
    background-color: transparent;
    color: #9900FF;
    font-weight: bold;
	text-decoration: none;
}
a:hover, a:active {
	background-color: transparent;
	color: #FF0033;
	font-weight: bold;
	text-decoration: none;
}
/*  This is the font designation used within the website because it's easy to read
  and the ideal font to use for ease and readability.*/

* {font-family: Verdana, Arial, serif; text-align: left; }

/*   Think of your website in layers. This is the body where the top header image will
   show up on every page, and layout the basic formatting.*/

body {
    font-size: 11px;
    font-family: Verdana, sans-serif, Arial;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
    background:  #fff url(images/garytopheader3.jpg) no-repeat top;
    font-family: Verdana, sans-serif, Arial;
}

  /*    Next is the container. This holds all the information within the website.   */

#container {
    width: 100%;
    margin: auto;
    background-color: transparent;
    line-height: 140%;
    overflow: hidden; /* My own note:  Corrects background image in Firefox  */
}
/*   These are how all the headings are formatted.  */
h1 {
    background-color: transparent;
    color: #000;
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: .5px;
    text-align: center;
    line-height: 110%;
}
h2 {
    background-color: transparent;
    color: #336699;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
    text-decoration: underline;
}
h3 {
    background-color: transparent;
    color: #336699;
	font-size: .95em;
	font-weight: bold;
	text-align: center;
}
h4 {
    background-color: transparent;
    color: #336699;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
}
/*    This is how the paragraphs will be formatted.  */
p {
    background-color: transparent;
    color:#000;
    font: 12px Verdana, Arial, sans-serif;
    line-height: 125%;
}
p.small {
    font-style: italic;
    font-family: Verdana, Arial, sans-serif;
    font-size: .5em;
    text-align: center;
}
p.tiny {
    font-family: Verdana, Arial, sans-serif;
    font-size: .65em;
    text-align: left;
}
p.song {
    font-family: Verdana, Arial, sans-serif;
    font-size: .65em;
    text-align: center;
}

p.resume {
    color: #B0862D;
    font: bold 14px Arial, Tahoma serif;
    line-height: 175%;
    text-align: center;
}

 /*  Below, these are how some of the text will be displayed.  */
.box {
    border: 2px dashed #6E6E6E;
    background-color: #FFFFEC;
    padding: .5em;
    font-family: "Courier New", Courier, monospace;
}

.statement {
    /*border: 2px solid #6E6E6E;*/
    background-color: #fff;
    padding: .5em;
    font-family: Verdana, sans-serif, Arial;
}
.plainbox {
    border: 3px dashed #000000;
    background-color: #FFFFE6;
    padding: .5em 0em 0em 3em;
    font-family: Verdana, sans-serif, Arial;
    font-size: .80em;
}

.songbox {
     border: #000000;
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    background-color: #F0F4FF;
    padding: .5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

input { background-color: white ! important}

.webring {
    margin-left: 190px;
    margin-right: 200px;
}
/*  css for the fixed tooltip.js script  */

#fixedtipdiv{
    position:absolute;
    padding: 2px;
    border: 2px solid red;
    font: bold 11px Verdana;
    line-height:12px;
    z-index:100;
    color: #C5DFF0;
}

 /*   Below is all the coding for the tooltips, or the links that have little boxes open up with text.   */

/*      *********************************** POP-UP TOOL TIP    */
#info {height:300px; position:relative;}
#info:hover {background-color:#fff;}

a#popup:visited {color:#000; text-decoration:none;}
a#popup {color:blue; text-decoration:none; position:relative; left:25px; font-weight:bold;}
a#popup span {display:none;}
a#popup:hover {color:#000; cursor:default;}
a#popup:hover #popbox {display:block; position:absolute; top:0px;; left:-10px;; width:250px; height:80px; background-color:#fff; color:#000; border:2px solid #04e; text-align:center; font-family:verdana; font-size:11px; padding-left:20px; padding-top:20px;}
a#popup:hover #poptop {display:block; position:absolute; top:0; left:0; width:225px; height:18px; color:#00c; background-color:#04e; color:#fff; text-align:center; font-weight:bold; border-bottom:4px ridge #00f; line-height:20px;}
a#popup:hover #warningbox {display:block; position:absolute; top:29px; left:5px; width:50px; height:27px; background-color:transparent; text-align:left; font-size:25px; font-weight:bold; font-family:serif; overflow:hidden;}
a#popup:hover #warning {display:block; position:absolute; top:30px; left:5px; width:0px; height:0px; border-left:15px solid #fff;border-right:15px solid #fff;border-bottom:25px solid #ee0; border-top:0px; overflow:hidden;}
a#popup:hover #x {display:block; position:absolute; top:0px; left:225px; width:15px; height:15px; border:1px solid #fff; background-color:#c00; color:#fff; font-weight:bold; text-align:center; overflow:hidden; cursor:pointer;}
acronym {color:#123; border-bottom:2px dotted #c00;}
/*      *********************************** END POP-UP TOOL TIP    */



/*      **************************         right column styles       ****************************     */
/*      ************  This rightnav section is all the formatting that goes into the column on the right side    */
#rightnav {
    float: right;
    width: 175px;
    padding: 0em 0em 0em 0.5em;
    position: relative;
    margin-top: 32em;

}
#rightnav h1 {
  margin-top: .5em;
  margin-left: 5px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  color: #FF0033;
  line-height: 0.9em;
  letter-spacing: 1px;
  text-align: center;
}

#rightnav h2 {
   margin-top: 5px;
  margin-left: 5px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  color: #000099;
  line-height: 0.9em;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
}

.right-column-box-yellow {
    float: left;
    width: 92%;       /* 85% */
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #C8C8C8;
	background-color: #FFF9D9;
}
.right-column-box-title-yellow {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: #FFEC80;
	font-weight: bold;
	color: #323232;
}
.right-column-box-yellow p {
	margin: 0.3em 0em 0.4em 0em;
    font-size: 90%;
}
.right-column-box-green {
	float: left;
	width: 92%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em rgb(200,200,200);
	background-color: rgb(224,244,181);
}
.right-column-box-green p {
	margin: 0.3em 0em 0.4em 0em;
}

.right-column-box-title-green {
	clear: both;
	display: block;
   margin: 0em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: rgb(196,221,108);
	font-weight: bold;
	color: rgb(50,50,50);
}

.right-column-box-gray {
    float: left;
	width: 92%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #7F7F7F;
	background-color: #DBDBDB;
}
.right-column-box-title-gray {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
    background-color: #A0A0A0;
	font-weight: bold;
	color: #fff;
}
.right-column-box-gray p {
	margin: 0.3em 0em 0.4em 0em;
    font-size: 90%;
}

.right-column-box-blue {
    float: left;
	width: 92%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
    border: solid 0.1em #C8C8C8;
    background-color: #E2EEFC;
}
.right-column-box-title-blue {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
    background-color: #BBD3F7;
    font-weight: bold;
    color: #323232;
}
.right-column-box-blue p {
	margin: 0.3em 0em 0.4em 0em;
    font-size: 90%;
}
.right-column-box-white {
    float: left;
	width: 92%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
    background-color: #fff;
    border: solid 0.1em #DDDDDD;
}
.right-column-box-title-white {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
    background-color: #DADADA;
	font-weight: bold;
	color: #323232;
}
.right-column-box-white p {
	margin: 0.3em 0em 0.4em 0em;
    text-align: center;
}

/*      **************************         left column styles       ****************************     */
/*      ************  This leftnav section is all the formatting that goes into the column on the left side    */

#leftnav {
    float: left;
    width: 180px;
   margin-top: 24%;            /* 233px;*/
    position: relative;
    vertical-align: top;
    padding: 3px;

}

#leftnav h1, #leftnav h2 { /* styles for right column headings */
  margin-top: 2em;
  padding: 2em 0em 0em 0em;
  margin-left: 5px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  color: #3A415D;
  line-height: 0.9em;
  letter-spacing: 1px;
  text-align: center;
}
#leftnav ul,li {
    display: block;
    margin: 0em 0em 0em 0em;
	padding: 0em 0em .5em 0em;
    list-style: disc inside;
    font-size: 1em;
    line-height: 130%;
    }
.left-column-box-gray {
	float: left;
	width: 90%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #7F7F7F;
	background-color: #DBDBDB;
}
.left-column-box-title-gray {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: #A0A0A0;
	font-weight: bold;
	color: #323232;
}
.left-column-box-gray p {
	margin: 0.3em 0em 0.4em 0em;
}
.left-column-box-yellow {
	float: left;
	width: 90%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #C8C8C8;
	background-color: #FFF9D9;
}
.left-column-box-title-yellow {
	clear: both;
	display: block;
    margin: 1em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: #FFEC80;
	font-weight: bold;
	color: #323232;
}
.left-column-box-yellow p {
	margin: 0.3em 0em 0.4em 0em;
}
.left-column-box-blue {
    float: left;
    width: 90%;
    margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
    border: solid 0.1em #C8C8C8;
    background-color: #E2EEFC;
}
.left-column-box-blue ul,li {
    display: block;
    margin: 0em 0em 0em 0em;
	padding: 0em 0em .5em 0em;
    list-style: disc inside;
    font-size: 1em;
    line-height: 130%;
}



.left-column-box-title-blue {
    clear: both;
    display: block;
    margin: 0em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
    background-color: #BBD3F7;
    font-weight: bold;
    color: #323232;
}

.left-column-box-blue p  {
	margin: 0.3em 0em 0.4em 0em;

}
.left-column-box-red {
	float: left;
	width: 90%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #C8C8C8;
	background-color: #FADBD2;
}
.left-column-box-title-red {
	clear: both;
	display: block;
    margin: 0em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: #FFB0B0;
	font-weight: bold;
	color: #323232;
}
.left-column-box-red p {
	margin: 0.3em 0em 0.4em 0em;
}

.left-column-box-white {
   float: left;
	width: 90%;
	margin: .5em 0em 0.8em 0em;
	padding: 0.4em 0.4em 0.4em 0.4em;
	border: solid 0.1em #DDDDDD;
	background-color: #fff;
}
.left-column-box-title-white {
	clear: both;
	display: block;
    margin: 0em 0em 0.2em 0em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background-color: #DADADA;
	font-weight: bold;
	color: #323232;
}
.left-column-box-white p {
	margin: 0.3em 0em 0.4em 0em;
    text-align: center;

}



/*   **************************   misc styles  ************************     */

p.left {
  font-size: .85em;
  text-align: center;
  color: #990033;
  margin-top: .25em;

}
p.right {
  font-size: .85em;
  text-align: center;
  color: #990033;
  margin-top: .25em;

}
p.pic {
  font-size: .85em;
  text-align: center;
  color: #000099;
  margin-top: 1em;
  font-family: Verdana,  Arial, "MS Sans Serif";
}

p.news {
  font-size: .90em;
  font-weight: bold;
  padding: .3em .3em .3em .3em;
  border: #6E6E6E;
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    background-color: #fff;
}
/*   **********  p.tbl for resume page **********  */
p.tbl {
  text-align:center;
  margin: 0em 0em 0em 2em;
  padding: 0em 0em 1em 0em;
  color: #9EBEDE;
  font-weight: bold;
  font-size: 1.25em;
}

.leftimg {
	float: left;
	margin: 0.5em 2em 0em 1em;   /* top right bottom left */
}


.dropcap {
    font-family:Georgia,;
    color: #797979;
    font-size:48px;
    font-weight:normal;
    line-height:80%;
    letter-spacing:-6px;
  
}

.indent {
   padding-left: 55px;
   padding-right: 55px;
  color: #B0862D;
  font-weight: bold;
}
.indent2 {
   padding-left: 55px;
  /* padding-right: 55px; */
}

.totop {
  font-size: .75em;
  text-align: right;
}

/*       *****************************   center column    *****************************    */
/*      ************  This ctrcontent or center content section is all the formatting that goes into the middle column.   */
#ctrcontent {
    margin-left: 180px;
    margin-right: 200px;
    margin-top: 14em;
    padding: 1em;
    max-width: 65em;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.5em;
    line-height: 130%;
    background-color: transparent;
  
}

#ctrcontent2 {
    margin-left: 180px;
    margin-right: 200px;
    margin-top: 14em;
    padding: 1em;
    max-width: 65em;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.25em;
    line-height: 130%;
    background-color: transparent;
    border: thin solid blue;
}

.ctrcontent-left {
	float: left;
	width: 50%;
}

.ctrcontent-right {
	float: right;
	width: 50%;
}
.ctrcontent-adright {
    float: right;
    width: 35%;
    padding: 0em 0em 0em .5em;
}

.songlist ul, li {
  text-align: center;
  list-style-type: none;
}


#ctrcontent th {
  width: 55%;
  text-align: center;

}
#ctrcontent td {
  width: 50%;
  text-align: left top;
  padding: 0em 0em 0em 2em;
}

#ctrcontent ul, li {
   /* display: block;*/
    margin: 0em 0em 0em 0em;         /*  top right bottom left  */
	padding: 0em 0em .5em 0em;
    font-size: .90em;
    line-height: 130%;
}

.ctrcontent-img-left {
	float: left;
	margin: 0.3em 0.5em 0em 0em;
	border: 1px solid #FFFFFF;
}

.ctrcontent-img-right {
	float: right;
	margin: 0.3em 0em 0em 0.5em;

}

#ctrcontent p.small {
    font-style: italic;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .65em;
    text-align: center;
}
#webring {
    margin: 0em 0em 0em 30%;
}




/*     ************************************   POP UP PICTURES   DO NOT EDIT  *******************************  */
/*        *******************  This is the formatting used with all those pictures that get enlarged with the mouse.  */
#picture {
    position:relative;
    top:10px;
    left:175px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#picture a.p1, #picture a.p1:visited {display:block; width:150px; height:60px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#picture a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#picture a.p1:hover .large {display:block; position:absolute; top:-260px; left:-250px; width:700px; height:276px; border:5px solid #000;}

#fantastick {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#fantastick a.p1, #fantastick a.p1:visited {display:block; width:165px; height:277px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#fantastick a img {border:0;}
#fantastick a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#fantastick a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#fantastick a.p1:hover .large {display:block; position:absolute; top:-100px; left:-300px; width:258px; height:450px; border:5px solid #000;}

#gig {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#gig a.p1, #gig a.p1:visited {display:block; width:165px; height:110px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#gig a img {border:0;}
#gig a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#gig a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#gig a.p1:hover .large {display:block; position:absolute; top:-150px; left:200px; width:500px; height:333px; border:5px solid #000;}

#hilton {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#hilton a.p1, #hilton a.p1:visited {display:block; width:165px; height:127px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#hilton a img {border:0;}
#hilton a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#hilton a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#hilton a.p1:hover .large {display:block; position:absolute; top:-150px; left:200px; width:500px; height:384px; border:5px solid #000;}

#jock {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#jock a.p1, #jock a.p1:visited {display:block; width:165px; height:182px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#jock a img {border:0;}
#jock a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#jock a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#jock a.p1:hover .large {display:block; position:absolute; top:-150px; left:200px; width:400px; height:441px; border:5px solid #000;}

#pag {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#pag a.p1, #pag a.p1:visited {display:block; width:165px; height:217px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#pag a img {border:0;}
#pag a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#pag a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#pag a.p1:hover .large {display:block; position:absolute; top:-130px; left:-300px; width:265px; height:350px; border:5px solid #000;}

#article {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#article a.p1, #article a.p1:visited {display:block; width:165px; height:105px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#article a img {border:0;}
#article a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#article a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#article a.p1:hover .large {display:block; position:absolute; top:-100px; left:-375px; width:350px; height:223px; border:5px solid #000;}

#caricature {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#caricature a.p1, #caricature a.p1:visited {display:block; width:165px; height:242px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#caricature a img {border:0;}
#caricature a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#caricature a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#caricature a.p1:hover .large {display:block; position:absolute; top:-100px; left:-300px; width:273px; height:400px; border:5px solid #000;}

#anniesetnj {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#anniesetnj a.p1, #anniesetnj a.p1:visited {display:block; width:165px; height:246px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#anniesetnj a img {border:0;}
#anniesetnj a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#anniesetnj a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#anniesetnj a.p1:hover .large {display:block; position:absolute; top:-100px; left:-300px; width:234px; height:349px; border:5px solid #000;}

#anniesetaf {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#anniesetaf a.p1, #anniesetaf a.p1:visited {display:block; width:165px; height:127px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#anniesetaf a img {border:0;}
#anniesetaf a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#anniesetaf a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#anniesetaf a.p1:hover .large {display:block; position:absolute; top:-100px; left:-500px; width:440px; height:339px; border:5px solid #000;}

#design1 {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#design1 a.p1, #design1 a.p1:visited {display:block; width:165px; height:67px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#design1 a img {border:0;}
#design1 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#design1 a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#design1 a.p1:hover .large {display:block; position:absolute; top:-75px; left:200px; width:400px; height:162px; border:5px solid #000;}

#design2 {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#design2 a.p1, #design2 a.p1:visited {display:block; width:165px; height:118px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#design2 a img {border:0;}
#design2 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#design2 a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#design2 a.p1:hover .large {display:block; position:absolute; top:-75px; left:200px; width:400px; height:286px; border:5px solid #000;}

#actor {
    position:relative;
    top:10px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#actor a.p1, #actor a.p1:visited {display:block; width:165px; height:84px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#actor a img {border:0;}
#actor a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#actor a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#actor a.p1:hover .large {display:block; position:absolute; top:-75px; left:200px; width:525px; height:267px; border:5px solid #000;}



#crazy {
    position:center;
    top:10px;
    left:100px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#crazy a.p1, #crazy a.p1:visited {display:block; width:150px; height:113px; text-decoration:none; background:#fff; top:0; left:0; border:2px solid #000; margin:.75em; }
#crazy a img {border:0;}
#crazy a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#crazy a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#crazy a.p1:hover .large {display:block; position:absolute; top:333em; left:300px; width:400px; height:300px; border:5px solid #000;}

#joseph {
    position:center;
    top:10px;
    left:100px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#joseph a.p1, #joseph a.p1:visited {display:block; width:150px; height:90px; text-decoration:none; background:#fff; top:0; left:0; border:2px solid #000; margin:.75em; }
#joseph a img {border:0;}
#joseph a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#joseph a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#joseph a.p1:hover .large {display:block; position:absolute; top:670em; left:250px; width:500px; height:307px; border:5px solid #000;}

#nono {
    position:center;
    top:10px;
    left:100px;
    width:75px;
    background-color:#fff;
    z-index:100;
}
#nono a.p1, #nono a.p1:visited {display:block; width:150px; height:108px; text-decoration:none; background:#fff; top:0; left:0; border:2px solid #000; margin:.75em; }
#nono a img {border:0;}
#nono a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#nono a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#nono a.p1:hover .large {display:block; position:absolute; top:900em; left:300px; width:400px; height:288px; border:5px solid #000;}





/*     ************************************   end POP UP PICTURES   *******************************  */

.loc {
    background-color: #fff;
    padding: .1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 6px 0px 0px 3px;    /*  top right bottom left */
    font-size: .8em
}

/*        This is the formatting used with the text navigation at the bottom of every page.      */

#bottomnav {
   color: #323232;
   font-size: 1em;
   padding: 1em;
   text-align: center;
   clear: both;
   vertical-align: text-bottom 100%;
   text-decoration: none;
}


#footer {
    clear: both;
    margin: 0em 0em 0em 0em;   /*  top right bottom left  */
    padding: .5em;
    border-top: 1px solid #000099;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .95em;
    color: #000;
    background-color: #CACEDB;
    text-align: center;
    line-height: 120%;
}
#desby {
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    font-size: .75em;
    text-align: left;
    color: #000;
    font-style: italic;
}

/*     ***************************  style for forms only  DO NOT EDIT  */
form.cmxform fieldset {
  margin-bottom: 5px;
  background-color: #F1F7FE;

}

form.cmxform legend {
  padding: 0 2px;
  font-weight: bold;
  color: #FF0033;
}
form.cmxform label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
}
form.cmxform fieldset ol {
  margin: 0px 3px 0px 0px;
  padding: 0;
}
form.cmxform fieldset li {
  list-style: none;
  padding: 5px;
  margin: 0;
}
form.cmxform fieldset fieldset {
  border: none;
  margin: 3px;

}
form.cmxform fieldset fieldset legend {
  padding: 5px;
  font-weight: normal;

}
form.cmxform fieldset fieldset label {
  display: block;
  width: auto;
}
form.cmxform em {
  font-weight: bold;
  font-style: normal;
  color: #FF0033;
}
form.cmxform label {
  width: 120px; /* Width of labels */
}
form.cmxform fieldset fieldset label {
  margin-left: 123px; /* Width plus 3 (html space) */
}