@import url(includes/browser_reset.css);

body { background-color: #ffffff; text-align: center; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 13px; color:#999999; }
#wrapper { width: 800px; height: 100%; background-color:#ffffff; margin:0px auto; }
#content { width: 800px; height: 100px; background-color:#ffffff; text-align:center; }
#menu { height: 91px; width: 800px; background-color:#fff; border-bottom: 1px solid #ccc; margin:0px auto; }
#mainsection { width: 800px; height: 493px; padding:0px; background-color:#ffffff; overflow:hidden;}
#skillsdescription { width:285px; float:left; height:445px; padding-left:15px; background-color:fff; text-align:left; }
#skillsimagesamples { width:500px; height445px; float:right; text-align:center; float:left; padding:0px; }
#skillsfootermenu { height: 30px; width: 800px; border-top: 1px solid #ccc; margin:0px auto; float:left; }
#footer { width: 800px; height:16px; background: url(images/footer.gif) no-repeat; }

h1 { font-size: 16px; margin-top:14px; color:#666666; line-height:1.15em;}
h2 {font-size: 13px; color:#666666; text-transform:uppercase;}
p { margin-bottom: 10px;}
p.small { font-size: 11px; margin-bottom: 11px;}
.bold {color:#666666;}

/* NAVIGATION ------------------------
				PART 1 NAVIGATION MENU...
				BIZARRE ORDER IS ABSOLUTELY NECESSARY TO WORK IN INTERNET EXPLORER IE 5 + 6
				EACH ELEMENT MUST HAVE ALL THESE ELEMENTS DEFINED OR ELSE THE LAYOUT BREAKS...
*/

ul#navigation {
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-left:15px;
	border: 0;
	top: 0px;
	left: 0px;
	width: 770px;
	height: 72px;
}

ul#navigation li {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	text-indent: -9999px;	
}

ul#navigation li a {
	border: 0;
	display: block;
	height: 72px;
}

ul#navigation li a:hover {
	border: 0;
	display: block;
}	

/* NAVIGATION PART 2 ----------------------
				ROLLOVER STYLES MUST BE IN THIS ORDER
				for each individual <li> and <a href> elements within the <li>
				OR IT WILL BREAK IN IE 5 + 6 ....
*/

li#dtlogo a:link,
li#dtlogo a:visited,
li#dtlogo a {
width:118px; 
height:72px;
margin-right:383px; /* PADDING OPTIONAL DEPENDING ON LAYOUT */
background: url(images/dtlogo.gif) no-repeat; 
background-position: 0px 0px;
}
 
li#dtlogo a:hover {
	background-position: 0px -72px;
}


	/* DT LOGO made WHITE for homepage (so it doesn't show) */
li#dtlogowhite a:link,
li#dtlogowhite a:visited,
li#dtlogowhite a {
width:118px; 
height:72px;
margin-right:383px; /* PADDING OPTIONAL DEPENDING ON LAYOUT */
/*background: url(images/dtlogo.gif) no-repeat; 
background-position: 0px 0px;*/
}
 
li#dtlogowhite a:hover {
	/*background-position: 0px -72px;*/
}
	/* end WHITE DT logo */


li#about a:link,
li#about a:visited,
li#about a {
width: 70px;
height:72px;
margin-right:25px; /* PADDING OPTIONAL DEPENDING ON LAYOUT */
background: url(images/about2.gif) no-repeat; 
background-position: 0px 0px;
}

li#about a:hover {
	background-position: 0px -72px;
}

li#skills a:link,
li#skills a:visited,
li#skills a {
width: 74px; 
height:72px;
margin-right:25px; /* PADDING OPTIONAL DEPENDING ON LAYOUT */
background: url(images/skills2.gif) no-repeat; 
background-position: 0px 0px;
}

li#skills a:hover { 
	background-position: 0px -72px; 
}

li#talk a:link,
li#talk a:visited,
li#talk a {
height:72px; 
width:75px;
background: url(images/talk2.gif) no-repeat; 
background-position: 0px 0px;
}

li#talk a:hover { 
	background-position: 0px -72px; 
}

li#about a.aboutactive { background-position: 0px -72px; }
li#skills a.skillsactive { background-position: 0px -72px; }
li#talk a.talkactive { background-position: 0px -72px; }


/* TOP LEFT SUBMENU -------------------------- 
*/

#top_left_sub { height: 20px; width: 256px; }

ul#subnavigation {
margin:0px;
padding:0px;
list-style-type:none;
display:inline;
width:276px;
}

ul#subnavigation li {
display:block;
float:left;
padding:0px;
margin-top:10px;
margin-right:10px;
}

ul#subnavigation li a.rolldot {
display: block;
width: 9px;
height: 10px;
margin:0px;
text-decoration: none;
background-image:url(ajaxfiles/greydot.gif);
}
ul#subnavigation li a.rolldot:hover {
background-image:url(ajaxfiles/greendot.gif)
/*background-position: -30px 0;*/
}	

ul#subnavigation li a.current {
display: block;
width: 9px;
height: 10px;
margin:0px;
text-decoration: none;
background-image:url(ajaxfiles/greendot.gif); 
}

.additionalimagestext {margin-top:4px;}

/* BOTTOM RIGHT SUBMENU -------------------------- 
*/

#bot_right_sub { height:48px; width: 800px; margin:0px; padding:18px 0px; text-align:right; background-image:url(images/skillsfooterbkgd.gif);}

ul#bsubnavigation {
position:relative;
text-align:right;
float:right;
margin-right:5px;
padding:0px;
list-style-type:none;
display:inline;
}

ul#bsubnavigation li {
display:block;
float:left;
padding:0px;
margin:0px;
margin-right:10px;
}

ul#bsubnavigation li a {
display: block;
margin:0px;
text-decoration: none;
}	

ul#bsubnavigation li a.current { color:#cccc00; } 

a:link { color: #999999; text-decoration:none;}
a:visited { color:#999900; }
a:hover { color:#cccc00; }
a:active { color: #999999;}

.current { color:#cccc00; }