/* CSS Document */

/* Remove focus rings in Firefox */
tab:focus > .tab-middle { -moz-outline: none !important }

body {
	font-family:	Arial, Helvetica, sans-serif;
	font-size:		12px;
	text-align:center;
	color: #333399;
	background-color: #FFFFFF;
	margin-bottom: 20px;
	}
select {
	border: 1px solid #999999;
}

h1 {
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 5px;
}

h2 {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}	
h3 {
	font-size: 12px;
	font-weight: bold;
}

a {
	margin: 0px;
	padding: 0px;
	color: #333399;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
a:hover {
	text-decoration: underline;
}

img {
	margin: 0px;
	padding: 0px;
}

* {margin:0; padding:0;} /* removes defaults of all elements */

#copywrite {
	text-align: left;
}

a.viewWebsite {
	font-weight: normal;
	padding-top: 5px;
}



div#mainwrap {
	width: 730px;
	text-align:left;
	background-image: url(images/banner.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	position: relative;
	}

/*************** Header ***************/
div#banner {
	position: relative;
}
div#logo {
	float: left;
	position: relative;
}
div#bannerphoto {
	float: left;
	position: relative;
}
div#menu li {
	font-size: 14px;
	font-weight: bold;
	display: inline;
	list-style-type: none;
}
div#menu {
	text-align: right;
	padding-bottom: 15px;
	padding-top: 15px;
	padding-right: 15px;
	position: relative;
	height: 20px;
}
div#contactbtn {
	position: absolute;
	left: 17px;
	top: 8px;
}

div#menu a {
	color: #F7911E;
	font-size: 14px;
	display: inline-block;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}


div#contentarea {
	position:relative;
	margin: 0px;
	overflow: visible;
	display: block;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-top: 10px;
	}
	
div#column2 {
	padding-top: 5px;
	background-color: #FFFFFF;
	padding-right: 0px;
	float: left;
	width: 355px;
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 5px;
	}

div#column1 {
	width: 355px;
	overflow: hidden;
	position: relative;
	visibility: visible;
	padding-right: 0px;
	font-weight: normal;
	color: #333399;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 0px;
	letter-spacing: 0.005em;
	float: left;
	font-size: 11px;
}

/*************** Home ***************/
div.boxheader {
	background-image: url(images/orangeheader.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 15px;
	padding-left: 20px;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
div.boxcontent {
	background-image: url(images/sidebars.jpg);
	background-repeat: repeat-y;
	padding-top: 10px;
	padding-left: 15px;
	height: 225px;
}
div.boxfooter {
	background-image: url(images/orangefooter.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
}

#loading {
	width: 150px;
	height: 60px;
	position: absolute;
	left: 175px;
	top: 118px;
	margin-top: -50px;
	margin-left: -100px;
	text-align: center;
	border: thin solid #CCCCCC;
	color: #FF0000;
	background-color: #FFFFFF;
}

div#blog {
	overflow: hidden;
	height: 225px;
	margin: 0px 10px 0px 0px;
	padding: 0px 15px 0px 0px;
}
div#blog p {
	margin-left: 10px;
	margin-right: 20px;
	overflow: hidden;
	margin-top: 0px;
}

div#blog p#blogTitle {
	font-weight: bold;
	color: #408080;
	padding: 10px 3px 15px 13px;
	text-align: left;
	letter-spacing: 1px;
	margin: 0px;
}
li.blogpost {
	visibility: visible;
	list-style-type: none;
	margin-right: 1.2em;
	margin-left: 1.2em;
	margin-bottom: .5em;
}

div.features {
	visibility: visible;
	float: left;
	position: relative;
	width: 178px;
}
div.features img {
	border: 1px solid #CCCCCC;
	padding: 1px;
	margin: 0px 2px 0px 0px;
}

div.featureDesc {
	visibility: visible;
	float: left;
	position: relative;
	width: 145px;
	height: 200px;
	margin-left: 8px;
}
div.featureDesc p {
	margin-top: 3px;
}

.company {
	font-style: italic;
}


/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after, .boxcontent:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix, .boxcontent {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix, * html .boxcontent {height: 1%;}
.clearfix, .boxcontent {display: block;}

/*************** Footer ***************/
div#footerbottom a {
	font-weight: normal;
}
div#footertop {
	height: 20px;
	background-image: url(images/footertop.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

div#footerbottom {
	background-image: url(images/footerbottom.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 85px;
	padding-left: 15px;
	font-size: 12px;
}

/*************** Websites ***************/
div.websiteMenu {
	visibility: visible;
	float: left;
	position: relative;
	width: 125px;
	background-color: #EEEEEE;
	padding-top: 2px;
	margin-right: 10px;
	padding-bottom: 2px;
	border: 1px solid #DDDDDD;
	padding-right: 2px;
	padding-left: 2px;
}
div.websiteMenu li {
	font-size: 12px;
	font-weight: bold;
	list-style-type: none;
}
div.websiteMenu a {
	display: block;
	padding: 10px 5px 10px 10px;
}
div.websiteMenu a:hover {
	text-decoration: none;
	background-color: #CCCCCC;
}




div.websiteDesc {
	visibility: visible;
	float: left;
	position: relative;
	width: 200px;
	padding-top: 10px;
	height: 295px;
}
div.websiteDesc li {
	padding-bottom: 3px;
	padding-left: 10px;
	list-style-position: inside;
}

img#websiteImg {
	border: 1px solid #CCCCCC;
}
div#websiteImgDiv {
	margin-left: 12px;
}

/*************** About ***************/
div.aboutheader {
	background-image: url(images/aboutboxheader.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 15px;
	padding-left: 20px;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
div.aboutcontent {
	background-image: url(images/aboutboxsides.gif);
	background-repeat: repeat-y;
	padding-top: 10px;
	padding-left: 25px;
	height: 225px;
	padding-right: 350px;
	padding-bottom: 10px;
	position: relative;
}
div.aboutfooter {
	background-image: url(images/aboutboxfooter.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
}

div#aboutPhoto {
	position: absolute;
	right: 30px;
	top: 31px;
}

div.resumeContent, div.slideshowContent, div.galleryContent {
	background-image: url(images/aboutboxsides.gif);
	background-repeat: repeat-y;
	padding-top: 10px;
	padding-left: 25px;
	padding-right: 350px;
	padding-bottom: 10px;
	position: relative;
}

div.slideshowContent {
	padding-left: 60px;
}

div.galleryContent {
	padding-left: 25px;
}