/* Stylesheet written by Trish Roque, www.creativepathstudio.com, for Portfolio presentation to potential employers, with help from Stu Nicholls CSS Play tutorial  */

* {
	padding: 0;
	margin: 0;
}

body {font-family: "Verdana", "Helvetica", "Arial", sans-serif; 
font-size: .9em;  color: #000; 
}

#home {
}

.titleheader {background: url(images/titleheader.gif) no-repeat bottom left;height: 80px;  width: 500px;}

h1.header {display: none;}

#header {background: url(images/greenswirl.gif) no-repeat center right;}
#header, #container { width: 90%; margin: 10px auto; }

#container { width: 750px; margin: 10px auto; padding: 10px 5px 20px 5px; 
}

#homeLogo {width: 700px; height: 300px; background: url(images/homeLogo2.gif) center no-repeat; margin: 10px auto; }

h1 {font-size: 1.5em; color: #8ca33d; border-bottom: dotted 1px #8ca33d; text-align: right; padding-right: 15px; margin-bottom: 10px;}

h2 {font-size: 1.2em; color:#8210d2; margin: 30px 0 8px 15px; border-top: 1px dotted #ff7f00; padding-top: 7px;}
h2.first {border: none; }

p {margin: 8px 20px;}

p.emphasis {font-weight:bold; color: #003333; margin-top: 20px;}

p.italics {font-style:italic; }

img.left, img.right, img.border {border: 1px solid #8ca33d; padding: 2px; }
img.left {float: left;  margin: 0 10px 3px 3px;}

img.right {float:right; margin: 0 3px 3px 8px;}

h2.logo {display: none;}

#container ul li {margin-left: 40px; margin-right: 10px; display: list-item; list-style-type: circle; list-style-position: outside; }

.clear {clear: both}

/*** menu styles ***/

#menu { width: 700px; margin: 15px auto; height: 50px; background: url(images/btmborder.gif) bottom no-repeat;}

#menu ul {margin: 0; padding: 0; list-style-type: none;}

#menu li {float: left;}

#menu li.list1 {background: url(images/web.gif) no-repeat transparent;}
#menu li.list2 {background: url(images/print.gif) no-repeat;}
#menu li.list3 {background: url(images/art.gif) no-repeat;}
#menu li.list4 {background: url(images/resume.gif) no-repeat;}
#menu li.list5 {background: url(images/home.gif) no-repeat;}

#menu a {display: block; width: 130px; height: 0px; padding-top: 36px; color: #000; overflow: hidden;}

/* hack for older versions of IE with incorrect box model */
* html #menu a:link, * html #menu a:visited {height:36px; he\ight:0;}

#menu a#item1 {background: url(images/webhov.gif) no-repeat -40px -140px transparent; }
#menu a#item2 {background: url(images/printhov.gif) no-repeat -40px -140px transparent; }
#menu a#item3 {background: url(images/arthov.gif) no-repeat -40px -140px transparent; }
#menu a#item4 {background: url(images/resumehov.gif) no-repeat -40px -140px transparent; }
#menu a#item5 {background: url(images/homehov.gif) no-repeat -40px -140px transparent; }

#menu a#item1:hover {background-position: 0 0; z-index: 50;}
#menu a#item2:hover {background-position: 0 0; z-index: 50;}
#menu a#item3:hover {background-position: 0 0; z-index: 50;}
#menu a#item4:hover {background-position: 0 0; z-index: 50;}
#menu a#item5:hover {background-position: 0 0; z-index: 50;}

* html #menu a:hover {height:36px; he\ight:0;}

#web #menu #item1 {background: url(images/webhov.gif) no-repeat;}
#print #menu #item2 {background: url(images/printhov.gif) no-repeat;}
#art #menu #item3 {background: url(images/arthov.gif) no-repeat;}
#resume #menu #item4 {background: url(images/resumehov.gif) no-repeat;}
#home #menu #item5 {background: url(images/homehov.gif) no-repeat;}
/** end menu styles **/


#footer { width: 750px; margin: 10px auto 10px auto ; background: #fff url(images/topborder.gif) top no-repeat; padding-top: 15px;}

#footer p { font-size: .8em; text-align: center;}