@charset "utf-8";
/* CSS Document */

/* =============================================== @global styles =========================================================== */

body  {
    font-family: Georgia, serif;    /* default page font */
	font-size: 12px;
	font-weight: bold;
	/* background-color: #fff; */
    margin: 0;          /* shorthand for all margins = 0 */
    padding: 0;         /* no padding */
	background: url(images/background.jpg) center top  no-repeat;
}

/* outerDiv wraps around the rest of the page */

div#outerDiv {
    width: 870px;
	margin: 0px auto;
	/* position: relative; */
	/* padding: 0 15px 0 15px; */
    /* background-color: #0F0; */
}

div#header {
    position: relative;
	height: 190px;
    margin: 0px auto;
    /* background-color: #F63; */
}

div#logo_TwitterBanner {
    height: 90px;
}

div#socialMedia {
	float:right;
	width: 450px;
	height: 80px;
	margin: 0 0 0 0;
	padding: 0 0 0 0px;
    /* background-color: #F63; */
    margin: 0px auto;
}

div#navBanner {
    height: 50px;
	margin: 10px 0 10px 0;
}

.split1 {
    height: 25px;
	margin: 10px 0px 10px -3px;
	background: url(images/split1.jpg) no-repeat;
}

.split2 {
    height: 25px;
	margin: 10px 0px 10px -11px;
	background: url(images/split2.jpg) no-repeat;
}

.split3 {
    height: 25px;
	margin: 30px 0px 10px -5px;
	background: url(images/split1.jpg) no-repeat;
}

.smallSplit1 {
	width: 565px;
	height: 30px;
	clear: left;
	margin: 10px 0 10px 0;
	background: url(images/split2.jpg) no-repeat right bottom;
}

.smallSplit2 {
	width: 565px;
	height: 30px;
	clear: left;
	margin: 10px 0 10px 0px;
	background: url(images/split1.jpg) no-repeat left bottom;
}



div#content {
	padding: 10px 6px 0 6px;
}

/* =============================================== @twitter =========================================================== */

div#follow {
	float: left;
	width: 139px;
	height: 51px;
	text-indent: -1000em;
    margin: 3px 0 0 0;
	background: url(images/titles/follow_me_on.gif) center top  no-repeat;
}

#socialMedia div#twitter {
	position: absolute;
	left: 555px;
	top: 0px;
    width: 45px;
	height: 51px;
    margin: 0px auto;
	background: url(images/twitter_logo.gif) no-repeat;
}

#twitter a:link, #twitter a:visited {
    width: 45px; 
	height: 51px;
    display: block;
    text-indent: -1000em;
	background: url(images/twitter_logo.gif) no-repeat;
    border: none;
}

#twitter a:hover, #twitter a:active {
	background: url(images/twitter_logo.gif) no-repeat;
}

#twitterLink {
	position: absolute;
	left: 594px;
	top: 20px;
	margin: 0px auto;
}

#socialMedia div#facebook {
	position: absolute;
	left: 645px;
	top: 0px;
    width: 46px;
	height: 51px;
    margin: 0px auto;
	background: url(images/facebook_logo.gif) no-repeat;
}

#facebook a:link, #facebook a:visited {
    width: 46px; 
	height: 51px;
    display: block;
    text-indent: -1000em;
	background: url(images/facebook_logo.gif) no-repeat;
    border: none;
}

#facebook a:hover, #twitter a:active {
	background: url(images/facebook_logo.gif) no-repeat;
}

#facebookLink {
	position: absolute;
	left: 685px;
	top: 20px;
    margin: 0px auto;
}

#socialMedia div#audioboo {
	position: absolute;
	left: 748px;
	top: 5px;
    width: 46px;
	height: 51px;
    margin: 0px auto;
	background: url(images/audioboo.gif) no-repeat;
}

#audioboo a:link, #audioboo a:visited {
    width: 46px; 
	height: 51px;
    display: block;
    text-indent: -1000em;
	background: url(images/audioboo.gif) no-repeat;
    border: none;
}

#audioboo a:hover, #audioboo a:active {
	background: url(images/audioboo.gif) no-repeat;
}

#audiobooLink {
	position: absolute;
	left: 788px;
	top: 20px;
    margin: 0px auto;
}



/* =============================================== @header logos =========================================================== */

#header div#homeLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
	background: url(images/logo.gif) no-repeat;
}

#homeLogo a:link, #homeLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/logo.gif) no-repeat left top;
    border: none;
}

#homeLogo a:hover, #homeLogo a:active {
	background: url(images/logo.gif) no-repeat left top;
}

#header div#experienceLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
	background: url(images/experienceLogo.gif) no-repeat;
}

#experienceLogo a:link, #experienceLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/experienceLogo.gif) no-repeat;
    border: none;
}

#experienceLogo a:hover, #experienceLogo a:active {
	background: url(images/experienceLogo.gif) no-repeat;
}

#header div#aboutLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
	background: url(images/aboutLogo.gif) no-repeat;
}

#aboutLogo a:link, #aboutLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/aboutLogo.gif) no-repeat;
    border: none;
}

#aboutLogo a:hover, #aboutLogo a:active {
	background: url(images/aboutLogo.gif) no-repeat;
}


#header div#contactLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
	background: url(images/contactLogo.gif) no-repeat;
}

#contactLogo a:link, #contactLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/contactLogo.gif) no-repeat;
    border: none;
}

#contactLogo a:hover, #contactLogo a:active {
	background: url(images/contactLogo.gif) no-repeat;
}

#header div#siteMapLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
}

#siteMapLogo a:link, #siteMapLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/siteMaplogo.gif) no-repeat;
    border: none;
}

#siteMapLogo a:hover, #siteMapLogo a:active {
	background: url(images/siteMaplogo.gif) no-repeat;
}

#header div#myWorkLogo {
	position: absolute;
	left: 0px;
	top: 0px;
    width: 319px;
	height: 73px;
    margin: 0px auto;
}

#myWorkLogo a:link, #myWorkLogo a:visited {
    width: 319px; 
	height: 73px;
    display: block;
    text-indent: -1000em;
	background: url(images/work_logo.gif) no-repeat;
    border: none;
}

#myWorkLogo a:hover, #myWorkLogo a:active {
	background: url(images/work_logo.gif) no-repeat;
}


/* =============================================== @Navigation =========================================================== */


#header #mainMenu {          /* set the position for the nav elements */
	width: 870px;
	height: 50px;
}

#mainMenu ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainMenu li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0;
    padding:0;
}

/* =============================================== @Nav Link Styles =========================================================== */

#mainMenu li a.homeButton:link, #mainMenu li a.homeButton:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 159px;
	height: 50px;
    background: url(images/nav/myWork.jpg) no-repeat left top;
    border: none;           /* no border */
}

#mainMenu li a.homeButton:hover, #mainMenu li a.homeButton:active {
    background-position: left bottom;      /* move image to show rollover */
}


#mainMenu li a.aboutButton:link, #mainMenu li a.aboutButton:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 164px;
	height: 50px;
    background: url(images/nav/aboutMe.jpg) no-repeat left top;
    border: none;           /* no border */
}

#mainMenu li a.aboutButton:hover, #mainMenu li a.aboutButton:active {
    background-position: left bottom;      /* move image to show rollover */
}

#mainMenu li a.experienceButton:link, #mainMenu li a.experienceButton:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 186px;
	height: 50px;
    background: url(images/nav/experience.jpg) no-repeat left top;
    border: none;           /* no border */
}

#mainMenu li a.experienceButton:hover, #mainMenu li a.experienceButton:active {
    background-position: left bottom;      /* move image to show rollover */
}

#mainMenu li a.contactButton:link, #mainMenu li a.contactButton:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 185px;
	height: 50px;
    background: url(images/nav/contactMe.jpg) no-repeat left top;
    border: none;           /* no border */
}

#mainMenu li a.contactButton:hover, #mainMenu li a.contactButton:active {
    background-position: left bottom;      /* move image to show rollover */
}

#mainMenu li a.cvButton:link, #mainMenu li a.cvButton:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 175px;
	height: 50px;
    background: url(images/nav/CV.jpg) no-repeat left top;
    border: none;           /* no border */
}

#mainMenu li a.cvButton:hover, #mainMenu li a.cvButton:active {
    background-position: left bottom;      /* move image to show rollover */
}


/* =============================================== @footer =========================================================== */

div#footer {
	position: relative;
	width: 870px;
	padding: 0 47px 0 47px;
	height: 220px;
    margin: 0 auto;
	background: url(images/background_footer.jpg) top left no-repeat;
}

#footer div#footerLogo {
	position: absolute;
	left: 35px;
	top: 0px;
    width: 156px;
	height: 47px;
    margin: 0px auto;
	background: url(images/mini_logo.gif) no-repeat;
}

#footerLogo a:link, #footerLogo a:visited {
    width: 156px; 
	height: 47px;
    display: block;
    text-indent: -1000em;
	background: url(images/mini_logo.gif) no-repeat;
    border: none;
}

#footerLogo a:hover, #footerLogo a:active {
	background: url(images/mini_logo.gif) no-repeat;
}

/* =============================================== @footer Links =========================================================== */

#footer #footerLinks {          /* set the position for the nav elements */
	position: absolute;
	width: 435px;
	height: 20px;
	top: 27px;
	margin: 0 0 0 155px;
}

#footerLinks ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#footerLinks li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0 4px 0 0;
    padding:0;
}

#phone {
	position: absolute;
	left: 589px;
	top: 29px;
	width: 23px;
	height: 16px;
    margin: 0 auto;
	text-indent: -1000em;
	background: url(images/telephone_icon.gif) top left no-repeat;
}

#phoneNumber {
	position: absolute;
	left: 617px;
	top: 29px;
    margin: 0 auto;
}

#email {
	position: absolute;
	left: 718px;
	top: 29px;
	width: 22px;
	height: 16px;
    margin: 0 auto;
	text-indent: -1000em;
	background: url(images/email_icon.gif) top left no-repeat;
}

#emailLink {
	position: absolute;
	left: 747px;
	top: 29px;
    margin: 0 auto;
}

#line {
	position: absolute;
	top: 50px;
	height: 16px;
	width: 870px;
    margin: 0 auto;
	background-image:url(images/footer_line.gif);
}


/* =============================================== @global text styles =========================================================== */

h1 {
	margin: 10px 0 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	line-height: 24px;
}

p, li {
	margin: 10px 0 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}

h2, h3, h4, h5, h6, h7 {
	margin: 0px 0 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight:bold;
	line-height: 20px;
}

.smallPrint {
	padding: 5px 0 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	color: #000;
	line-height: 14px;
	font-weight: normal;
}



/* =============================================== @page titles =========================================================== */

#homeTitle {
	clear: left;
	width: 377px;
	height: 29px;
	background:url(images/titles/homepage_title.jpg);
	text-indent: -1000em;
}

#experienceTitle {
	clear: left;
	width: 199px;
	height: 28px;
	background: url(images/titles/myExperience.jpg);
	text-indent: -1000em;
}

#aboutMeTitle {
	clear: left;
	width: 128px;
	height: 24px;
	background: url(images/titles/aboutMe.jpg);
	text-indent: -1000em;
}


#contactTitle {
	clear: left;
	width: 157px;
	height: 23px;
	background: url(images/titles/contactMe.jpg);
	text-indent: -1000em;
}

#siteMapTitle {
	clear: left;
	width: 157px;
	height: 30px;
	background: url(images/titles/siteMap.jpg);
	text-indent: -1000em;
}

#audioTitle {
	clear: left;
	width: 186px;
	height: 27px;
	margin: 0 0 20px 0;
	background: url(images/titles/audioboos.jpg);
	text-indent: -1000em;
}


#workLinks {
    height: 217px;
}

/* =============================================== @homepage styles =========================================================== */

#workLinks #work1 {          /* set the position for the nav elements */
	width: 567px;
	height: 217px;
}

#work1 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#work1 li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0;
    padding:0;
}

/* =============================================== @homepage Links =========================================================== */

#work1 li a.next:link, #work1 li a.next:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/next.jpg) left top;
    border: none;           /* no border */
}

#work1 li a.next:hover, #work1 li a.next:active {
    background-position: left bottom;      /* move image to show rollover */
}

#work1 li a.propeller:link, #work1 li a.propeller:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/propeller.jpg) left top;
    border: none;           /* no border */
}

#work1 li a.propeller:hover, #work1 li a.propeller:active {
    background-position: left bottom;      /* move image to show rollover */
}

#work1 li a.freelance:link, #work1 li a.freelance:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/freelance.jpg) left top;
    border: none;           /* no border */
}

#work1 li a.freelance:hover, #work1 li a.freelance:active {
    background-position: left bottom;      /* move image to show rollover */
}

/* =============================================== @homepage Styles =========================================================== */

.workLinks #work2 {          /* set the position for the nav elements */
	width: 567px;
	height: 217px;
}

#work2 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#work2 li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0;
    padding:0;
}

/* =============================================== @homepage Styles =========================================================== */

#work2 li a.logos:link, #work2 li a.logos:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/logos.jpg) left top;
    border: none;           /* no border */
}

#work2 li a.logos:hover, #work2 li a.logos:active {
    background-position: left bottom;      /* move image to show rollover */
}

#work2 li a.full_fat:link, #work2 li a.full_fat:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/full_fat.jpg) left top;
    border: none;           /* no border */
}

#work2 li a.full_fat:hover, #work2 li a.full_fat:active {
    background-position: left bottom;      /* move image to show rollover */
}

#work2 li a.cov_uni:link, #work2 li a.cov_uni:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 189px;
	height: 217px;
    background: url(images/cov_uni.jpg) left top;
    border: none;           /* no border */
}

#work2 li a.cov_uni:hover, #work2 li a.cov_uni:active {
    background-position: left bottom;      /* move image to show rollover */
}

.liveTwitter {
	width: 235px;
}

.Twitter {
	width: 250px;
	margin: 0 0 0 -10px;
}

.twitterTitle{
	width: 235px;
	height: 20px;
	margin: 0 0 0 0;
	text-indent: -1000em;
	background: url(images/titles/twitter.jpg) top left no-repeat;
}

#newsPanel {
	float: right;
	clear: both;
	width: 255px;
	height: 730px;
	padding: 30px 0 0 30px;
	background: url(images/news_background.jpg);
}

.newSplit{
	width: 235px;
	height: 20px;
	background: url(images/news-split.jpg);
	margin: 0 0 10px 0;
}

#linksTitle1{
	width: 235px;
	height: 20px;
	margin: 5px 0 0 0;
	text-indent: -1000em;
	background: url(images/titles/My_Favourite_Sites.jpg) top left no-repeat;
}

#linksTitle2{
	width: 235px;
	height: 20px;
	margin: 10px 0 0 0;
	text-indent: -1000em;
	background: url(images/titles/Like_Minded_Thinkers.jpg) top left no-repeat;
}

.homeLinks{
	margin: 2px 0 2px 0;
	width: 235px;
	height: 38px;
}

#Link1 a:link, #Link1 a:visited {
	float: left;
    width: 45px;
	height: 38px;
    display: block;
	padding: 0 0 0 0;
	margin: 0 auto;
	text-indent: -1000em;
	background: url(images/Links/boagworld.jpg);
    border: none;
}

#Link1 a:hover, #Link1 a:active {
	background: url(images/Links/boagworld.jpg);
}

#Link2 a:link, #Link2 a:visited {
	float: left;
    width: 45px;
	height: 38px;
    display: block;
	padding: 0 0 0 0;
	margin: 0 auto;
	text-indent: -1000em;
	background: url(images/Links/web_designer_world.jpg);
    border: none;
}

#Link2 a:hover, #Link2 a:active {
	background: url(images/Links/web_designer_world.jpg);
}

#Link3 a:link, #Link3 a:visited {
	float: left;
    width: 45px;
	height: 38px;
    display: block;
	padding: 0 0 0 0;
	margin: 0 auto;
	text-indent: -1000em;
	background: url(images/Links/dope_awards.jpg);
    border: none;
}

#Link3 a:hover, #Link3 a:active {
	background: url(images/Links/dope_awards.jpg);
}

#Link4 a:link, #Link4 a:visited {
	float: left;
    width: 45px;
	height: 38px;
    display: block;
	padding: 0 0 0 0;
	margin: 0 auto;
	text-indent: -1000em;
	background: url(images/Links/2_advanced_studios.jpg);
    border: none;
}

#Link4 a:hover, #Link4 a:active {
	background: url(images/Links/2_advanced_studios.jpg);
}

#Link5 a:link, #Link5 a:visited {
	float: left;
    width: 45px;
	height: 38px;
    display: block;
	padding: 0 0 0 0;
	margin: 0 auto;
	text-indent: -1000em;
	background: url(images/Links/christopher_pinches.jpg);
    border: none;
}

#Link5 a:hover, #Link5 a:active {
	background: url(images/Links/christopher_pinches.jpg);
}

.sideLinks {
	padding: 11px 0 0 0;
}

#content div#emailMe {
	floats: left;
    width: 126px;
	height: 33px;
	background: url(images/email_button.jpg);
}

#emailMe a:link, #emailMe a:visited {
    width: 91px; 
	height: 25px;
    display: block;
	padding: 8px 0 0 35px;
	text-decoration: none;
	color: #000000;
	margin: 0 auto; 
	background: url(images/email_button.jpg);
    border: none;
}

#emailMe a:hover, #emailMe a:active {
	background: url(images/email_button.jpg);
}

/* =============================================== @experience styles =========================================================== */

.floatLeft {
	float: left;
	width: 146px;
	height: 157px;
	clear: left;
	margin: 10px 10px 0 0;
}

.floatRight {
	float: right;
	width: 146px;
	height: 157px;
	clear: left;
}


a.fullFatEX:link, a.fullFatEX:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/experience/fullFat.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.fullFatEX:hover, a.fullFatEX:active {
    background-position: left top;      /* move image to show rollover */
}

a.Pinches:link, a.Pinches:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/experience/chris_pinches.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.Pinches:hover, a.Pinches:active {
    background-position: left top;      /* move image to show rollover */
}

a.propellerEX:link, a.propellerEX:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/experience/propeller.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.propellerEX:hover, a.propellerEX:active {
    background-position: left top;      /* move image to show rollover */
}

a.nextEX:link, a.nextEX:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/experience/next.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.nextEX:hover, a.nextEX:active {
    background-position: left top;      /* move image to show rollover */
}

.cssMastery {
	height: 157px;
	width:146px;
	text-indent: -1000em;
	background: url(images/experience/myOwn1.jpg) left top no-repeat;
}

a.boagEX:link, a.boagEX:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/experience/myOwn2.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.boagEX:hover, a.boagEX:active {
    background-position: left top;      /* move image to show rollover */
}

/* =============================================== @EX Info =========================================================== */

#infoPanel {
	float: right;
	clear: both;
	width: 255px;
	height: 800px;
	padding: 30px 0 0 30px;
	margin: 0 0 0 0;
	background: url(images/experience/info_background.jpg) left top no-repeat;
}


#infoPanel .List {          /* set the position for the nav elements */
	width: 235px;
}

.List ul {               /* turn off all the normal list behavior */
    margin: 0;
    padding: 0;
}

.List li {               /* turn off the normal list item behavior */
    margin: 0 0 0 48px;
    padding:0;
	line-height: 24px;
	list-style-image:url(images/experience/bullet.jpg);
}

#infoPanel .ListWeapons {          /* set the position for the nav elements */
	width: 235px;
}

.ListWeapons ul {               /* turn off all the normal list behavior */
    margin: 0;
    padding: 0;
	list-style: none;
}

.ListWeapons li {               /* turn off the normal list item behavior */
    margin: 0 0 0 0px;
    padding:0;
	line-height: 38px;
}

.photoshop{
	margin: -4px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/photoshop.gif) left top no-repeat;
}

.illustrator{
	margin: -8px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/illustrator.gif) left top no-repeat;
}

.dreamweaver{
	margin: -8px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/dreamweaver.gif) left top no-repeat;
}

.flash{
	margin: -8px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/flash.gif) left top no-repeat;
}

.inDesign{
	margin: -8px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/indesign.gif) left top no-repeat;
}

.wacom{
	margin: -8px 0 0 0;
	float:left;
	clear: left;
	text-indent: -1000em;
	width: 46px;
	height: 46px;
	background: url(images/experience/wacom.gif) left top no-repeat;
}


/* =============================================== @experience styles =========================================================== */

#twitterPanel {
	float: right;
	clear: both;
	width: 255px;
	height: 450px;
	padding: 30px 0 0 30px;
	margin: 0 0 0 0;
	background: url(images/twitter_background.jpg) left top no-repeat;
}

.newSite {
	height: 157px;
	width:146px;
	text-indent: -1000em;
	background: url(images/aboutMe/newWebsite.jpg) left top no-repeat;
}

a.holding:link, a.holding:visited {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: block;         /* block mode for graphical button */
	text-indent: -1000em;
    text-decoration: none;  /* no underline */
    padding: 0 0px 0 0px; /* line up text & image */
	width: 146px;
	height: 157px;
    background: url(images/aboutMe/rip.jpg) no-repeat left top;
    border: none;           /* no border */
}

a.holding:hover, a.holding:active {
    background-position: left top;      /* move image to show rollover */
}

/* =============================================== @About Me Info =========================================================== */

#content div.button {
	float: left;
    width: 126px;
	height: 30px;
	margin: 0 15px 0 0;
	background: url(images/button.jpg) no-repeat left top;
}


.button a:link, .button a:visited {
    width: 126px; 
	height: 30px;
    display: block;
    text-decoration: none;
	color: #000000;
	padding: 8px 0 0 10px;
	background: url(images/button.jpg) no-repeat left top;
    border: none;
}

.button a:hover, .button a:active {
	background: url(images/button.jpg) no-repeat left top;
}

.aboutFloatLeft {
	float: left;
	width: 146px;
	height: 139px;
	clear: left;
	margin: 0px 15px 0 0;
}

.aboutFloatRight {
	float: right;
	width: 146px;
	height: 139px;
	clear: left;
}

.audio1part1 {
	height: 139px;
	width: 146px;
	margin: 6px 0 0 0;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part1.jpg) left top no-repeat;
}

.audio1part2 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part2.jpg) left top no-repeat;
}


.audio1part3 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part3.jpg) left top no-repeat;
}


.audio1part4 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part4.jpg) left top no-repeat;
}

.audio1part5 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part5.jpg) left top no-repeat;
}

.audio1part6 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio1-part6.jpg) left top no-repeat;
}

.audio2part1 {
	height: 139px;
	width: 146px;
	margin: 6px 0 0 0;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part1.jpg) left top no-repeat;
}

.audio2part2 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part2.jpg) left top no-repeat;
}


.audio2part3 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part3.jpg) left top no-repeat;
}


.audio2part4 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part4.jpg) left top no-repeat;
}

.audio2part5 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part5.jpg) left top no-repeat;
}

.audio2part6 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part6.jpg) left top no-repeat;
}

.audio2part7 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part7.jpg) left top no-repeat;
}

.audio2part8 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio2-part8.jpg) left top no-repeat;
}

.audio3part1 {
	height: 139px;
	width: 146px;
	margin: 6px 0 0 0;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part1.jpg) left top no-repeat;
}

.audio3part2 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part2.jpg) left top no-repeat;
}

.audio3part3 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part3.jpg) left top no-repeat;
}


.audio3part4 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part4.jpg) left top no-repeat;
}

.audio3part5 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part5.jpg) left top no-repeat;
}

.audio3part6 {
	height: 139px;
	width: 146px;
	text-indent: -1000em;
	background: url(images/aboutMe/audio3-part6.jpg) left top no-repeat;
}

/* =============================================== @Contact Info =========================================================== */

.contactSection{
	height: 100px;
	width: 300px;
}

.contactInner{
	padding: 30px 0 0 0;
	height: 70px;
}

.contactSection2{
	height: 150px;
}

.contactInner2{
	padding: 5px 0 0 0;
	height: 150px;
}


.contact_pic1{
	float: left;
	height: 100px;
	width: 100px;
	text-indent: -1000em;
	background: url(images/contact/mobile.jpg) left top no-repeat;
}

.contact_pic2{
	float: left;
	height: 100px;
	width: 100px;
	text-indent: -1000em;
	background: url(images/contact/email.jpg) left top no-repeat;
}

.contact_pic3{
	float: left;
	height: 100px;
	width: 100px;
	text-indent: -1000em;
	background: url(images/contact/twitter.jpg) left top no-repeat;
}

.contact_pic4{
	float: left;
	height: 100px;
	width: 100px;
	text-indent: -1000em;
	background: url(images/contact/facebook.jpg) left top no-repeat;
}

.contact_pic5{
	float: left;
	height: 100px;
	width: 100px;
	text-indent: -1000em;
	background: url(images/contact/carrier_pigeon.jpg) left top no-repeat;
}


/* =============================================== @Contact Info =========================================================== */

#siteList1 {
	width: 170px;
	float:left;
}

#siteList2 {
	width: 170px;
	float:left;
}

#siteList3 {
	width: 170px;
	float:left;
}

#siteList4 {
	width: 170px;
	float:left;
}

#siteList5 {
	width: 170px;
	float:left;
}


#siteList1 .site {          /* set the position for the nav elements */
	width: 170px;
}

.site ul {               /* turn off all the normal list behavior */
    margin: 25px 0 0 0;
    padding: 0;
}

.site li {               /* turn off the normal list item behavior */
    margin: 0px 0 0 30px;
    padding:0;
	line-height: 26px;
	list-style-image:url(images/experience/bullet.jpg);
}

#siteList2 .site {          /* set the position for the nav elements */
	width: 170px;
}

.site ul {               /* turn off all the normal list behavior */
    margin: 25px 0 0 0;
    padding: 0;
}

.site li {               /* turn off the normal list item behavior */
    margin: 0px 0 0 30px;
    padding:0;
	line-height: 26px;
	list-style-image:url(images/experience/bullet.jpg);
}

#siteList3 .site {          /* set the position for the nav elements */
	width: 170px;
}

.site ul {               /* turn off all the normal list behavior */
    margin: 25px 0 0 0;
    padding: 0;
}

.site li {               /* turn off the normal list item behavior */
    margin: 0px 0 0 30px;
    padding:0;
	line-height: 26px;
	list-style-image:url(images/experience/bullet.jpg);
}

#siteList4 .site {          /* set the position for the nav elements */
	width: 170px;
}

.site ul {               /* turn off all the normal list behavior */
    margin: 25px 0 0 0;
    padding: 0;
}

.site li {               /* turn off the normal list item behavior */
    margin: 0px 0 0 30px;
    padding:0;
	line-height: 26px;
	list-style-image:url(images/experience/bullet.jpg);
}

#siteList5 .site {          /* set the position for the nav elements */
	width: 170px;
}

.site ul {               /* turn off all the normal list behavior */
    margin: 25px 0 0 0;
    padding: 0;
}

.site li {               /* turn off the normal list item behavior */
    margin: 0px 0 0 30px;
    padding:0;
	line-height: 26px;
	list-style-image:url(images/experience/bullet.jpg);
}







/* =============================================== @global links =========================================================== */

a.normal_link  {
    font-family: Georgia, 'Times New Roman', Times, serif; 
	font-size: 12px; 
	font-weight: bold; 
	color:#000000; 
	background-color: #f9f7c7; 
	text-decoration:none;
}