/*   RESET per Eric Myer */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* ----------
   INDEX
   ---------- */
 body.ndx {
	background-color: #747474;
    position:relative; /*enable AP, Z */
}

/* all .ndx anchors */
.ndx  a {
    position:relative;
    display:block;
    text-decoration:none;
    width: 100%;
    height: 100%;
}
/* all INDEX TEXT SPANS */
.ndx a:link span.txt,
.ndx a:visited span.txt,
.ndx a:hover span.txt {
  display:block;
  position: absolute;
  top:0;
  left:0;
/*  left:-9000px;  */
text-indent: -9000px;
  width: 100%;
  height: 100%;
}

/* INDEX PRIMARY NAV   */
#ndx-nav {
  position:absolute;
  top: 256px;
  left: 569px;
  margin:0;
  padding:0;
  z-index: 10; /* above img for IE7 */
}


   /* INDEX TITLE SPANS */
#ndx-nav a:link span.titl,
#ndx-nav a:visited span.titl {
  display:block;
  position: absolute;
 left:0;
text-indent: -8000px;
  top:0;
/*  z-index: 100; test remove 3/21 */
  width: 100%;
  height: 100%;
}
#ndx-nav a:hover span.titl {
left:200px;
text-indent:0;
width: 200px;
  color: #aaa;
  background: transparent;
/*  text-decoration:none;  test remove 3/21 */
}



/* Mike's Heights (per offset calculations) vary,
but the graphic heights appear to be consistent,
so I am temporarily replacing variable heights
with fixed height of 26px with bottom-margin of 6px
*/
#ndx-nav li {
    position:relative;
/*    margin:0;
    padding:0;    test remove 3/21 */
    margin-bottom: 6px;
    height: 26px;
}

#ndx-nav .overview  {
    width: 127px;
    margin-left:0;  /* [ul L offset] = 569 */
  }
#ndx-nav .graphics  {
    width: 126px;
  margin-left:8px; /* 577 */
  }
#ndx-nav .illustration {
    width: 145px;
    margin-left:15px; /* 584 */
  }
#ndx-nav .layout  {
    width: 172px;
    margin-left:20px; /* 589  */
  }
#ndx-nav .trademarks  {
    width: 141px;
    margin-left:24px;  /* 593  */
  }
#ndx-nav .fine-art  {
    width: 141px;
    margin-left:25px; /* 594 */
  }
#ndx-nav .art-lessons  {
    width: 131px;
    margin-left:32px; /* 594 */
  }
#ndx-nav .contact  {
    width: 131px;
    margin-left:35px; /* 601 */
  }


/* .ndx GROUPS NAV   */

#ndx-groups-nav  {
  position:absolute;
  top: 257px; /* Mike's offset=259 */
  left: 461px;
/*  margin:0;
  padding:0; test remove 3/21 */
/*  border: 1px solid red;    */
}

#ndx-groups-nav li {
    position:relative;
/*    margin:0;
    padding:0; test remove 3/21 */
/*    border-right: 2px solid  black;  */
}

#ndx-groups-nav .yahoo  {
    width: 79px;
    height: 81px;
    margin-left:0; /* 461 */
/*    border: 3px solid green;  */
    margin-bottom: 42px; /* calculated from Mike's offsets at 47 - see spreadsheet - then adjusted */
  }

/* Mike's left offset for this li don't match graphic,
so I'm temporarily overriding it
*/
#ndx-groups-nav .blog  {
    width: 79px;
    height: 85px;
    margin-left:0; /* 461 */
  }

#ndx-groups-nav a:link span.titl,
#ndx-groups-nav a:visited span.titl {
  display:block;
  position: absolute;
 left:0;
 text-indent: -8000px;
  top:0;
/*  z-index: 100;   test remove 3/21 */
  width: 100%;
  height: 100%;
}
#ndx-groups-nav a:hover span.titl {
left:-80px;
  top:80px;
text-indent:0;
width: 200px;
  color: #aaa;
  background: transparent;
  text-decoration:none;
}

/* INDEX FOOTER */

.ndx #footer {
  margin: 12em 0 8em;
}


.ndx #footer p a:link,
.ndx #footer p a:visited {
  color:#aaa;
  background:transparent;
  font-size: .7em;
    text-align:center;
    text-decoration:underline;
}

.ndx #footer p a:hover {
  color:#eee;
  background:transparent;
  text-decoration:none;
}

/* ------------------------- */
/* ------------------------- */

body {
color: #fff;
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}

#wrap {
  width: 580px;
  margin-left: 200px;
  margin-top: 100px;
}

h1{
  font-weight:bold;
  margin:0 0 2em 0;
  font-size: 1.8em;
}
h2{
   font-weight:bold;
   font-size: 1.7em;
   margin:3em 0 1em;
 }


p  {
  margin:1em 0;
  font-size: 1.6em;
}

p a {

  color: #fff;
  background:transparent;
}


/* FOOTER */

#footer {
  margin: 8em 0;
}


#footer p a:link,
#footer p a:visited {
  color:#ddd;
  background:transparent;
  font-size: .9em;
  text-align:center;
  text-decoration:underline;
}

#footer p a:hover {
  color:#fff;
  background:transparent;
  text-decoration:none;
}



/* ------------------------- */
/* ------------------------- */
/* TOP NAV */
/* ------------------------- */
/* ------------------------- */

/* TOPNAV NAV   */
#topnav  {
  position:absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 30px;
}
#topnav  li {
    position:relative;
    float:left;
    margin-right: 8px;
    height: 26px;
}

/* all TOPNAV anchors */
#topnav  a {
    position:relative;
    display:block;
    text-decoration:none;
    width: 100%;
    height: 100%;
}
/* all TOPNAV TEXT SPANS */
#topnav  a:link span.txt,
#topnav  a:visited span.txt,
#topnav  a:hover span.txt {
  display:block;
  position: absolute;
  top:0;
  left:0;
/*  left:-9000px;  */
text-indent: -9000px;
  width: 100%;
  height: 100%;
}



   /* TOPNAV TITLE SPANS */
#topnav  a:link span.titl,
#topnav  a:visited span.titl {
  display:block;
  position: absolute;
  top:40px;
  left:0;
  text-indent: -8000px;
  width: 100%;
  height: 100%;
}
#topnav  a:hover span.titl {
  left:0;
  text-indent:0; /* leave this at zero so 2-line txt doesn't look weird */
  width: 240px;
  color: #fff;
  background: transparent;
  font-size: 1.4em;
  text-align:center;
}

/* [far right span title] gets special offset
to keep it on the page */
#topnav .contact  a:hover span.titl {
   left: -82px;
   }




#topnav  .overview  {
    width: 85px;
    margin-left:0;
  }
#topnav  .graphics  {
    width: 70px;
  }
#topnav  .illustration {
    width: 97px;
  }
#topnav  .layout  {
    width: 129px;
  }
#topnav  .trademarks  {
    width: 92px;
  }
#topnav  .fine-art  {
    width: 61px;
  }
#topnav  .art-lessons  {
     width: 95px;
  }
#topnav  .contact  {
     width: 80px;
  }


/* ------------------------- */
/* CONTACT */
/* ------------------------- */

body.contact {
	background:#C2D19E;
}

/* ------------------------- */
/* CHARLOTTESVILLE ILLUSTRATOR */
/* ------------------------- */
body.charlottesville-illustrator {
  background: #6EAEE8 url(../images/muddi-top-overview-c.jpg) no-repeat 0 0;
    }

    /* ------------------------- */
/* GRAPHICS */
/* ------------------------- */
body.graphics {
  background: #FCD958 url(../images/muddi-top-graphics-c.jpg) no-repeat 0 0;
    }
.graphics #wrap {
  width:800px;
  margin:100px 0;
  text-align:left;
/*  border-top: 2px solid blue;  */
}

.graphics #portfolio{
  float:right; /* contain floated children */
  margin:0 60px 100px 20px; /* 80 width */
/*  border: 1px solid red;  */
  }
.graphics #portfolio li{
  font-size: 1.2em;
  float:right;
  color:#E39651;
  background:#FCD958;
/*  border-top:4px solid green;   */
  margin-bottom: 50px;
}

.graphics #portfolio img{
  float:right;
  width:500px;   /* 500 +80 =580 width */
/*  border-bottom: 3px solid green;  */
  position:relative; /* proactive ie fix */
  display:inline; /* proactive ie fix */
}

.graphics #portfolio li label{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  text-align:right;
  float:left;
  width: 196px; /* 4px surplus for ie */
  margin-right:20px; /* 580 + 196 +20 = 796 */
/*  border-bottom: 2px solid black;  */
  margin-top:150px;
  position:relative;/* proactive ie fix */
}
.graphics #portfolio li.triple-cluster label{
margin-top:130px;
  }
.graphics #portfolio li.quad-cluster label{
  margin-top: 110px;
  }

.graphics #portfolio span {
  display:block;
  margin-bottom: 1.4em;
}

.graphics #footer p{
    margin:2em 80px 1em 240px;
}


.graphics #footer p a:link,
.graphics #footer p a:visited{
  color:#E39651;
  background:#FCD958;
}
.graphics #footer p a:hover{
  color:#000;
  background:#FCD958;
}

    /* ------------------------- */
/* FILTER */
/* ------------------------- */

body.filter{
  background:green;
   color:#fff;
   line-height: 1.2;
}
 /* special nav
 problem: each page has page-specific nav img
 and there's no nav image for filter page
 solution: rename topnav to filternav
 so it is not affected by topnav rules
 */

 .filter #filternav {
   margin-top: 100px;
   border-left: 2px solid yellow;
   padding:0 2em;
 }


 .filter #filternav a{
   display:block;
   margin: 1.5em;
   font-size: 1.7em;
 }

.filter #filternav a:link,
.filter #filternav a:visited {
   background:transparent;
   color:#fff;
   text-decoration:none;
   text-decoration:none;
}
.filter #filternav a:hover {
  color:#000;
}

  .filter #filternav a:link span.titl,
  .filter #filternav a:visited span.titl,
  .filter #filternav a:hover span.titl{
    display:none;
    }




    /* ------------------------- */
/* ILLUSTRATION */
/* ------------------------- */

body.illustration {
  background:#E39651 url(../images/muddi-top-iily-c.jpg) no-repeat 0 0;
    }


.illustration #wrap {
  width:800px;
  margin:100px 0;
  text-align:left;
/*  border-top: 2px solid blue;  */
}

.illustration #portfolio{
  float:right; /* contain floated children */
  margin:0 60px 100px 20px; /* 80 width */
/*  border: 1px solid red;  */
  }
.illustration #portfolio li{
  font-size: 1.2em;
  float:right;
  color:#FCD958;
  background:#E39651;
/*  border-top:4px solid green;   */
  margin-bottom: 50px;
}

.illustration #portfolio img{
  float:right;
  width:500px;   /* 500 +80 =580 width */
/*  border-bottom: 3px solid green;  */
  position:relative; /* proactive ie fix */
  display:inline; /* proactive ie fix */
}

.illustration #portfolio li label{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  text-align:right;
  float:left;
  width: 196px; /* 4px surplus for ie */
  margin-right:20px; /* 580 + 196 +20 = 796 */
/*  border-bottom: 2px solid black;  */
  margin-top:150px;
  position:relative;/* proactive ie fix */
}
.illustration #portfolio li.triple-cluster label{
margin-top:115px;
  }
.illustration #portfolio li.quad-cluster label{
  margin-top: 110px;
  }

.illustration #portfolio span {
  display:block;
  margin-bottom: 1.4em;

}

.illustration #samples{
margin-left: 156px; /* special margin positions img above portfolio labels */
margin-bottom: 2em;
}


.illustration #samples img{
  float:left;
    margin-top: -25px;
    margin-right: 10px;
}

.illustration #samples a{
  color:  blue;
  font-weight:bold;
  font-style: italic;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  }


.illustration  p,
.illustration #animation ul,
.illustration h2{
  margin:2em 80px 1em 240px;
}

.illustration h2{
  font-size: 1.7em;
  color:#FCD958;
  background:#E39651;
}

.illustration #animation li {
  font-size:1.5em;
  margin-bottom: .4em;
}


.illustration #bikes {
  background:#fff;
  width: 500px; /* same as portfolio images */
}



/* ------------------------- */
/* LEGACY STYLES
/* ------------------------- */

.style1 {	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
}
.style2 {font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000; }

.style3 {color: #000000}