/*Normalizes margin, padding */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,hr,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }



ul#nav { background:url(navBG.gif) }
ul#nav li { float:left; list-style-type:none }
ul#nav li a { height:29px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none }

li#navAds a, li#navLogos a, li#navIllustrations a, li#navCaricatures a, li#navComics a, li#navWeb a { background:url(navBG.gif) }

/*  
Measurements for the nav image replacement:

	The distance from the top to the...
	
	initial state = 0
	rollover state = 29px
	selected state = 58px

	The distance from the far-left to the...
	
	ads button = 0
	logos button = 55px
	illustrations button = 129px
	caricatures button = 276px
	comics button = 411px
	web button = 492px

	The width of the...
	
	ads button = 55px
	logos button = 74px
	illustrations button = 147px
	caricatures button = 135px
	comics button = 81px
	web button = 57px
*/

li#navAds a 						{ background-position:0 0; width:55px; left:0}
li#navAds a:hover					{ background-position:0 -29px }
body#pageAds li#navAds a 				{ background-position:0 -58px }

li#navLogos a 						{ background-position:-55px 0; width:74px; left:55px }
li#navLogos a:hover					{ background-position:-55px -29px }
body#pageLogos li#navLogos a 				{ background-position:-55px -58px }

li#navIllustrations a 					{ background-position:-129px 0; width:147px; left:129px }
li#navIllustrations a:hover				{ background-position:-129px -29px }
body#pageIllustrations li#navIllustrations a 		{ background-position:-129px -58px }

li#navCaricatures a 					{ background-position:-276px 0; width:135px; left:276px }
li#navCaricatures a:hover				{ background-position:-276px -29px }
body#pageCaricatures li#navCaricatures a 		{ background-position:-276px -58px }

li#navComics a 						{ background-position:-411px 0; width:81px; left:411px }
li#navComics a:hover					{ background-position:-411px -29px }
body#pageComics li#navComics a 				{ background-position:-411px -58px }

li#navWeb a 						{ background-position:-492px 0; width:57px; left:492px }
li#navWeb a:hover					{ background-position:-492px -29px }
body#pageWeb li#navWeb a 				{ background-position:-492px -58px }

html { text-align:center }
body { text-align:center; width:800px; margin:0 auto; font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	color: #fff; background:#333 url(images/bg_stripe.gif); position:relative }

ul#nav { position:absolute; top:62px; left:225px }

#header {
	
	height: 100px;
	
	margin-right: 28px;
	}
	
	#header h1 {
	position:absolute; top: 0; left: 0; height: 88px; width: 226px; text-indent: -9999px;
	background: url(DDAD_logo.gif) no-repeat;
	}
	
#contact {
	position:absolute; top: 0; left: 216px;
	width: 546px;
	height: 48px;
	padding-top: 14px;
	padding-right: 10px;
	color: #fff;
	font-size: 12px;
	line-height: 14px;
	text-align: right;
	}


#contact a {
	color: #fff;
	text-decoration: none;
	}

#contact a:hover {
	color: #999;
	}	
		
#content {
	font-size: 12px;
	line-height: 14px;
	color: #000;
	position: absolute;
	height: 492px;
	width: 800px;
	top:100px;
	left:50%;
	margin-left:-400px;
	}

h2 {
	font-size: 20px;
	font-weight: bolder;
	color: #000;
	font-style: normal;
	padding-bottom: 14px;
}
p {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 0px;
	}



/* The containing box for the gallery. */
#container {
	position:relative;
	width:742px;
	height:490px;
	margin:0px auto 0 auto;
	border:1px solid #000;
	background-color: #a3a07f;	
	background-image:url(images/ads/galleryBG.jpg)
    }
/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }
/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:0px; 
    top:0px; 
    left:20px; 
    overflow:hidden; 
    background:#fff;
    }
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:4px 4px 4px 4px; 
    text-align:left; 
    cursor:default;
    }
#container a.slidea {
    background:url(images/ads/tf_connect.jpg); 
    height:105px; 
    width:91px;
	background-position:-50px -20px;
    }
#container a.slideb {
    background:url(images/ads/dsa_poster.jpg); 
    height:105px; 
    width:91px;
	background-position:-120px -250px;
    }
#container a.slidec {
    background:url(images/ads/regent_ad.jpg); 
    height:105px; 
    width:91px;
	background-position:-140px -35px;
    }
#container a.slided {
    background:url(images/ads/tech_salon.jpg); 
    height:105px; 
    width:91px;
	background-position:-160px -165px;
    }
#container a.slidee {
    background:url(images/ads/sheer_class.jpg); 
    height:105px; 
    width:91px;
	background-position:-120px -220px;
    }
#container a.slidef {
    background:url(images/ads/eyelash_perming.jpg); 
    height:105px; 
    width:91px;
	background-position: -190px -34px;
    }
#container a.slideg {
    background:url(images/ads/beauty_employers.jpg); 
    height:105px; 
    width:91px;
	background-position:-160px -165px;
    }
#container a.slideh {
    background:url(images/ads/get_sorted.jpg); 
    height:105px; 
    width:91px;
	background-position:-137px -20px;
    }
#container a.slidei {
    background:url(images/ads/enterprise.jpg); 
    height:105px; 
    width:91px;
	background-position: -122px -122px;
    }
#container a.slidej {
    background:url(images/ads/lushcocktail.gif); 
    height:105px; 
    width:91px;
	background-position:-210px -258px;
    }
#container a.slidek {
    background:url(images/ads/speed_dating.gif); 
    height:105px; 
    width:91px;
	background-position:-95px -125px;
    }
#container a.slidel {
    background:url(images/ads/pottery_people_flyer.gif); 
    height:105px; 
    width:91px;
	background-position:-100px -1500px;
    }
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
	width:303px;
	height:460px;
    }
#container li {
    float:left;
    }
/* move the thumbnails into the correct position */
#container ul {
    margin:16px; 
    float:left;
    }
/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff; 
    }
/* styling the :hover span */
#container a.gallery:hover span {
	position:absolute;
	width:345px;
	height:470px;
	top:20px;
	left:354px;
	color:#000;
	background:#a5a281;	
    }