@charset "utf-8";
/* CSS Document */
<style type="text/css">
html, body{	height: 100%;}
body {	background-color:#001639; }
#sitebg {position: fixed;top: 0px;width: 980px;	left: 50%;	margin-left: -490px;background: url(images/siteBG.png) no-repeat fixed center top;	text-align:left; display:block;height: auto; min-height:100%; z-index: -1; }
#center {position: absolute;top: 0px;width: 980px;	left: 50%;	margin-left: -490px;text-align:left; display:block;height: auto; }

* html #sitebg { position:absolute; }
* html #sitebg {height:100%;}/*min-height for IE6*/

/* Top Bar */
#header {
	position:relative; 	width: 100%;	height: 65px;	top: 0px;	background: url(images/navbartop.gif) no-repeat center top;	}
#header ul {position:relative;	display: block;	width: 720px;	top: 40px;	list-style-type:none;	text-transform:uppercase;	float: right;	z-index: 11;	margin: 0;	padding: 0;}
#header ul li {float: right;}
#header ul li a, #header ul li a:visited{position: relative; text-decoration:none;	font-size: 1.2em;	color:#FFF;	display:block;	margin: 0 15px;	text-align: center;}
.portfoliotxt {	position: absolute;	left: 280px;top:45px;}
#menu {	position:relative;	width: 100%;	height: 45px;	top: 0px;	text-align: left; z-index: 11;}
#menubar {position:absolute;width: 100%;	height: 45px;	top: 65px;	background:url(images/navbarbottom.gif) no-repeat center top;	text-align: left; z-index: -1}
#menu ul {	position:relative;	display: block;	width: 100%;	list-style-type:none;	text-transform:uppercase;	float: right;	z-index: 11;	margin: 0 15px 0 0;	padding: 0;}
#menu ul li {float: right;}
#menu ul li a, #menu ul li a:visited {position: relative;	text-decoration:none;	font-size: 1em;	color:#FFF;	display:block;	line-height: 45px;	height: 45px;	width: 140px;	padding: 0 15px;	text-align: center;}
#menu ul li a:hover, #menu ul li a:active {	background: #10263b;}
.activepage {background: #10263b;	position: relative;	z-index:5;}
.logo {	position:absolute;	width: 250px;	height: 130px;	top: 0px;	left: 10px;	z-index: 4;}
.logo img {border:none;}

/*All Pages*/
#contents {position: relative;	width: 920px;	height: auto;	top:20px;	padding: 30px; z-index:10;}
#contents a, #contents a:visited, .leftcolumn a, .rightcolumn a, .leftcolumn a:visited, .rightcolumn a:visited {text-decoration: none; color:#295C8C;}
#contents a:hover, #contents a:active, .leftcolumn a:hover, .rightcolumn a:hover, .leftcolumn a:active, .rightcolumn a:active {text-decoration: underline; color:#6aa4db;}
.leftcolumn p, .rightcolumn p, #contents p{margin: 0 0 10px 0; text-indent:25px;}
.leftcolumn {position: relative;	width: 445px;	height: auto;	top: 0px;	float: left; padding: 30px 0 0 30px; z-index:11; font-family:Arial, Helvetica, sans-serif;}
.rightcolumn {position: relative;	width: 445px;	height: auto;	top: 0px;	float: right;padding: 30px 30px 0 0; z-index:11; font-family:Arial, Helvetica, sans-serif;}
.caption {font-weight: bold;	font-size: 1.2em;}

/*Index*/
.index {position:relative;background:url(images/indexbg.jpg) no-repeat; height: 200px; top:50px; padding: 50px; border:solid;}
.index div {position:relative; background:url(Images/trans90.png) repeat; height: 140px; padding: 30px; text-align:center;}
.index div a {font-size:1.5em; text-decoration:none; display:block; width: 300px; line-height: 40px; background:#CCC; color: #000; position:relative; margin: 0 auto; border:3px solid #333;}
.index div a:hover {background:#333; color:#FFF; border: 3px solid #CCC;}


/*Home Page*/
.architecttxt {position: absolute;	left: 20px; width: 188px; height: 450px; top: 10px; background: url(images/architecttxt.png) no-repeat center; z-index: 10;}
#architect {width: 188px;	height: 450px;	background:url(images/archiBG.png);	position:absolute;	top: 10px;	left: 20px;	margin: 0;	padding: 0;	filter:alpha(opacity=60);	-moz-opacity:0.6;	-khtml-opacity: 0.6;	opacity: 0.6;}
.graphictxt {position: absolute; left: 208px; width: 188px; height: 450px; top: 10px;  background: url(images/graphictxt.png) no-repeat center; z-index: 10;}
#graphicdesign {width: 188px;	height: 450px;	background:url(images/graphicBG.png);	position:absolute;	top:10px;	left: 208px;	margin: 0;	padding: 0;	filter:alpha(opacity=60);	-moz-opacity:0.6;	-khtml-opacity: 0.6;	opacity: 0.6;}
.webtxt {position: absolute; left: 396px; width: 188px; height: 450px; top: 10px;  background: url(images/webtxt.png) no-repeat center; z-index: 10;}
#websitedesign {width: 188px;	height: 450px;	background:url(images/webdesignBG.png);	position:absolute;	top: 10px;	left: 396px;	margin: 0;	padding: 0;	filter:alpha(opacity=60);	-moz-opacity:0.6;	-khtml-opacity: 0.6;	opacity: 0.6;}
.phototxt {position: absolute; left: 584px; width: 188px; height: 450px; top: 10px;  background: url(images/phototxt.png) no-repeat center; z-index: 10;}
#photography {width: 188px;	height: 450px;	background:url(images/photoBG.png);	position:absolute;	top: 10px;	left: 584px;	margin: 0;	padding: 0;	filter:alpha(opacity=60);	-moz-opacity:0.6;	-khtml-opacity: 0.6;	opacity: 0.6;}
.digiprojtxt {position: absolute; left: 772px; width: 188px; height: 450px; top: 10px;  background: url(images/digiprojtxt.png) no-repeat center; z-index: 10;}
#digiproj {width: 188px;	height: 450px;	background:url(images/digiprojBG.png);	position:absolute;	top: 10px;	left: 772px;	margin: 0;	padding: 0;	filter:alpha(opacity=60);	-moz-opacity:0.6;	-khtml-opacity: 0.6;	opacity: 0.6;}
/*End Home Page*/

/*Graphic Design*/
.graphicheadtxt {position:absolute; width: 382px; height: 35px; background:url(images/graphicheadtxt.png) no-repeat; top: 25px;}
#graphiccontent {position: relative; width: auto;	height: auto;	top: 5px; background:url(images/trans75.png);}
#graphiccontent img {border:none;}
#graphiccontent  a:hover {text-decoration:none}
.graphicheadtxt {position:absolute; top: 0;}

.graphicsection {position:relative; padding: 15px;}
div.graphicsection a strong img, div.graphicsection a em img {height: 0; width: 0; border-width: 0;} {height: 0; width: 0; border-width: 0;}
div.graphicsection a:hover strong img, div.graphicsection a:hover em img {position: absolute;  border:15px solid #666; z-index: 100;}
.graphicleft{position:relative;float:left;}
.graphicright {position:relative; float: right;}
.graphictop, .graphicmiddle , .graphicbottom {position:relative;}
.graphicdesigntxt {padding: 15px; position:relative; background-color:#EFEFEF;}

.presweek {height: 565px;  border-top: 1px solid #000;}
.presweek .graphictop {text-align:center;z-index: 3}
.presweek .graphicmiddle {z-index: 1;}
.presweek .graphicbottom {text-align:center; z-index: 2}
.presweektxt {height: 155px; width: 800px; top:0; right: 0; margin: 15px auto;}
div.presweek a:hover strong img {top: 0; left: 50px; height:500px; width: auto;}
div.presweek a:hover em img {top: -175px; left: 30px; width:800px; height: auto;}

.fox {height: 250px;  border-top: 1px solid #000; z-index:40;}
.fox .graphicleft {width:400px;}
.fox .graphicright {width:400px; text-align:center; z-index: 50}
.foxtxt {height: 220px; width:400px; top:0; right: 0; float:right;}
div.fox a:hover strong img {top: 0px; left: -100%; height:500px; width: auto;}

.ipod {height: 250px; z-index:50;}
.ipod .graphicleft {width:300px; text-align:center; z-index:50;}
.ipod .graphicright {width:575px;z-index:40;}
.ipodtxt {height: 220px; width:545px; top:0; right: 0; float:right;}
div.ipod a:hover strong img {top: 0px; left: 50%; height:600px; width: auto;}

.gladwynn {height: 500px;  border-top: 1px solid #000;}
.gladwynn .graphictop {height:200px;}
.gladwynn .graphicbottom {height:300px;}
.gladwynntxt {height: 155px; width: 600px; top:0; right: 0; margin: 0 auto;}
div.gladwynn a:hover strong img {top: -225px; left: 100px; height:500px; width: auto;}

#timeline {position: relative;	height: 525px;	padding: 15px;  border-top: 1px solid #000;}
#timeline a:hover {text-decoration:none}
#timelinetext {position: relative;	left: 0;	top: 0;	background-color:#EFEFEF; height: 490px;	width: 34%;	padding: 15px;}
#timelinescroll1 {position: absolute;	top: 15px;	right: 15px;	width: 500px;	overflow: auto;    border: 1px solid #666;	height: 250px;}
#timelinescroll1 img {height: 94%;}
#timelinescroll2 {position: absolute;	bottom: 15px;	right: 15px;	width: 500px;	overflow: auto;    border: 1px solid #666;	height: 250px;}
#timelinescroll2 img {height: 180%}

#hazleton {position: relative;	height: 575px; border-top: 1px solid #000;}
#hazletontext {position: absolute;	top: 15px;	background-color:#EFEFEF;	width: 45%;	right: 5%;	padding: 15px;	height: 510px;}
div.hazletongraphics {position: absolute;	top: 15px;	width: 40%;	left: 5%;}
#hazleton a:hover {text-decoration:none}
div.hazletongraphics a strong img {height: 0; width: 0; border-width: 0;}
div.hazletongraphics a:hover strong img {position: absolute;  top: -10px; left: 50%; width:390px; height: auto; border:15px solid #666; z-index: 100;}
div.hazletongraphics .small {width: 120px;border: 0; margin: 0 5px 5px 0;}

#toolkit {position: relative;height: 300px; border-top: 1px solid #000; z-index:1}
#toolkit a:hover {text-decoration:none}
#toolkittext {position: absolute;	top: 7%;	background-color:#EFEFEF;	width: 343px;	right: 30px;	padding: 15px;	height: 220px;}
div.toolkitgraphics {position: absolute;	top: 7%;	width: 460px;	left: 30px;	height: 85%;}
img.toolkit1 {position: relative;	top: 1px;	width: 100%; border: 0; margin-bottom:20px;}
img.toolkit2 {position: relative;	width: 100%; border: 0;}
div.toolkitgraphics a strong img {height: 0; width: 0; border-width: 0;}
div.toolkitgraphics a:hover strong img {position: absolute;  top: 0px; left: 50px; width:700px; height: auto; border:15px solid #666; z-index: 100;}
div.toolkitgraphics .small {width: 120px;border: 0; margin: 0 5px 5px 0;}


#ratzuki {position: relative;	height: 675px; border-top: 1px solid #000;}
#ratzuki a:hover {text-decoration:none}
#ratzukitext {position: relative;margin: 15px auto; background-color:#EFEFEF;	width: 75%;	padding: 15px;	height: 150px; z-index:1;}
div.ratzukigraphics1 {position: relative; width: 900px; margin: auto; top: 10px; text-align:center; z-index: 2;}
div.ratzukigraphics2 {position: relative;	width: 900px; margin: auto; text-align:center; z-index: 2;}
img.ratzuki {width: 275px; border: 0;}
img.ratzukitall {height: 250px; border: 0;}
.ratzukigraphics1 a strong img, .ratzukigraphics2 a strong img, .ratzukigraphics1 a em img{height: 0; width: 0; border-width: 0;}
.ratzukigraphics1 a:hover strong img {position: absolute;  top: 10px; left: 150px; width: 500px; height: auto; border:15px solid #666; z-index: 100;}
.ratzukigraphics1 a:hover em img {position: absolute;  top: 10px; left: 250px; width: auto; height: 450px; border:15px solid #666; z-index: 100;}
.ratzukigraphics2 a:hover strong img {position: absolute;  top: -180px; left: 150px; width: 500px; height: auto; border:15px solid #666; z-index: 100;}

/*End Graphic Design*/
/*Webdesign*/
.webleft {position:relative; height: 475px; background:url(images/trans75.png); top:30px; padding:15px; margin-bottom:40px}
div.webleft ul li{width: 365px;}
.webright{position:relative; height: 505px; top:30px;  margin-bottom:40px;}
.webheadtxt{position:absolute; height:36px; width:375px; background:url(images/webheadtxt.png) no-repeat;top:25px; left: 20px;}
.webleft img, .webright img {border: none;}
.webtitle {font-size:1.2em; font-weight:bold;  text-decoration:underline;}
div.webright a strong img {height: 0; width: 0; border-width: 0;}
div.webright a:hover strong img {position: absolute;  top: 3px; right: 100px; height: auto; width: auto;}
.scale {height: 150px;}


/*Photography*/
#photocontent {	position: relative;	width: auto;	height: 450px;	top: 0;	background:url(images/trans75.png);	padding: 30px;}
.photoheadtxt {position:absolute; top: -5px; right: 18px; height: 36px; width:348px; background: url(images/photoheadtxt.png);}
div.photos {position: relative;	top: 0;	width: auto;	height: auto;}
.photos img {border: 0; margin: 0 10px 10px 0;}

/*End Photography*/

/*Digital Projects*/
#digiprojlinks {position: relative;	top: 0;	width: auto;	margin: auto;	height: auto;	padding: 0 15px;	z-index:2;}
#digitxt {position: absolute;	top: 35px;	width: 700px;	height: 475px;	right: 30px;	background:url(images/trans75.png) repeat;	z-index: 1;}
.digiheadtxt {position:absolute; top: 0; right: 175px; height: 35px; width:411px; background: url(images/digiprojheadtxt.png);}
#digiprojlinks img {border: none;	margin: 0 0 10px 0;}
#digiprojlinks a {display:inline;	padding:0px 5px 0px 5px;	text-decoration:none;	color: #000;}
#digiprojlinks a:hover {background:transparent; color: #000}
#digiprojlinks a span {display:none;}
#digiprojlinks a span ul li{width: 600px;}
#digiprojlinks a:hover span {display:inline;position:absolute;	top:20px;	left:230px;}
/*End Digital Projects*/

/*Contact Page*/
.aboutheadtxt {position: absolute; background:url(images/aboutheadtxt.png) no-repeat; width: 239px; height:36px; top: 27px;}
.about {background:url(images/trans75.png) repeat; position: relative; height: 390px; top: 30px; padding: 20px;}
.contact {background:url(images/trans75.png) repeat; position: relative; height: 150px; top: 30px;  margin-bottom: 50px; padding: 20px;}
.contactheadtxt {position:absolute; background:url(images/contactheadtxt.png) no-repeat; width: 211px; height:33px; top: 27px; right:28px;}
.resourcesheadtxt {position:absolute; background:url(images/resourcesheadtxt.png) no-repeat; width: 262px; height:36px; top: 265px; right:33px;}
</style>