@charset "UTF-8";
/* Charater encoding, replaced meta tag charset dec. in HTML file */

/*	Author: Michael Bezeau
	Created: Feb 16 2011
	Revised: Feb 23 2011
	CSS Version: 2.1
	
	Purpose: Style sheet for portfolio site, using FIR
	
	Related Files: 0
*/

/* clear default styling from all block level elements */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	}

/* - top - right - bottom - left -
 * two num: top/bottom left/right
 * three num: top right/left bottom
 * four num: top right bottom left
 */

/* link style */
a {
	outline: none;
	}
a:link { 
	color: #333;
	}
a:visited {
	color: #333;
	}
a:hover {
	color: #ccc;
 	}
a:active {
	color: #333;
	}

body { 
	overflow:scroll;
	/* tiling background */
	background: #c7bdb4 url(../images/backgroundTile.jpg);
	background-repeat: repeat;
	/* text style */
	font-family: "Lucida Sans Unicode", 
		"Lucida Grande", 
		sans-serif;
	text-align: justify;
	font-size: 12px; 
	font-weight: bold;
	color: #5a5059;
	}
	
#pageWrap {
	/* background image, center, displayed on top of tile */
	background-image: url(../images/backgroundImage.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	}

#pageContent {
	width: 800px; 
	margin: 0 auto;
	}
	
#pageTop {
	/* Michael Bezeau, paragraph text */
	}
	
#pageTop h1 a{
	/* 'a' tag is not a block element, use 'display: block;'
	 * to set the size */
	display: block;
	background-image: url(../images/titleImg.jpg);
	width: 630px;
	height: 109px;
	/* using margin to position, do not need to use relative 
	 * position */
	margin: 0 auto;
	/* pull header text of to the left side */
	text-indent: -9999px;
	}

#pageTop h2{
	/* h2 is a block style element */
	width: 630px;
	height: 130px;
	margin: 0 auto;
	}
	
#portfolio {
	/*   2 x 280px  +  4 x 5px  +  4 x 7px  */
	width: 608px;
	height:400px;
	margin: 0 auto;
	}

#portfolio h2 {
	/* My work */
	/* do not need to set to 'display block' because
	 * h2 is a block element */
	background-image: url(../images/myWork.jpg);
	/* use position relative to set position */
	position: relative;
	left: -12px;
	width: 164px;
	height: 53px;
	/* pull header text of to the left side */
	text-indent: -9999px;
	}

#portfolio ul li{
	/* list of sample work images */
	list-style: none;
	float: left;
	padding: 7px;
	margin: 5px;
	background-image: url(../images/border.jpg);
	/* firefox rounded border */
	-moz-border-radius: 5px;
	/* CSS 3 - safari, opera, chrome, */
	/* IE 9, new firefox will support */
	border-radius: 5px;
	}

#flashContent {
	display:block;
	width:656px;
	height:480px;
	margin: auto auto;
	}
	
#flashContentButton {
	display:block;
	width:280px;
	height:126px;
	}

#pageBottom {
	/* Say hello, contact me images */
	clear: left;
	width: 444px;
	margin: 0 auto;
	}

#pageBottom h2 {
	/* Say hello */
	position: relative;
	background-image: url(../images/sayHello.jpg);
	left: -93px;
	width: 177px;
	height: 58px;
	/* pull header text of to the left side */
	text-indent: -9999px;
	}

#pageBottom ul {
	/* ul is a block style element, can set size */
	width: 444px;
	/*  */
	position: relative;
	left: 
	}
		
#pageBottom li{
	/* list of contact icon images */
	list-style: none;
	float: left;
	/* can indent here or in 'li a' */
	text-indent: -9999px;
	}

#pageBottom li a{
	/* list of contact icon images */
	list-style: none;
	/* 'a' tag is not a block element, use 'display: block;'
	 * to set the size */
	display: block;
	width: 148px;
	height: 45px;
	}
	
#pageBottom li{background-image: url(../images/email.jpg);}
	
#pageBottom li+li{background-image: url(../images/twitter.jpg);}

#pageBottom li+li+li{background-image: url(../images/facebook.jpg)	}

#pageBottom p {
	/* copyright Michael Bezeau */
	clear: left;
	padding-top: 20px;
	width: 180px;
	margin: 0 auto;
	}