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

@import url("reset.css");
@import url("forms.css");

html { }

body {	 height: auto;	margin: 0; padding: 0;
	font-family: verdana;	 color: #555; }

* {margin:0; padding:0; }



/*** structure ***/
#container {}

	#header {width: 100%; height: 230px; margin: 0 auto; 
			background: url(images/masthead.jpg) bottom center no-repeat; }
	.home #header {height: 130px; }
		#logo {width: 950px; margin: 0 auto;  height: 230px; position: relative; }
		.home #logo {height: 130px;   }
			#logo a {display: block; position: absolute; top: 105px; left:00px; height: 128px; width: 341px;  text-indent: -9999px; overflow: hidden; 
					background: url(images/forge22-logo3.png) 0 0 no-repeat; }
			#logo a:hover {background-position: bottom left; }
			.home #logo a {top: 20px; left: 47px; background-image: url(images/forge22-logo2.png); }
			.home #logo a:hover {background-position: top left; cursor: default; }
			
		#masthead {width: 521px; height: 146px; display: block; position: absolute; bottom:0; left:430px; background-repeat: repeat-none; }
			.home #masthead {display: none;}
			.web #masthead {background:url(/css/images/header-web.jpg); }
			.code #masthead {background:url(/css/images/header-coding.jpg); }
			.graphic #masthead {background:url(/css/images/header-graphics.jpg); }
			.services #masthead {background:url(/css/images/header-services.jpg); }
			.downloads #masthead {background:url(/css/images/header-downloads.jpg); }
			.contact #masthead {background:url(/css/images/header-contact.jpg); }

	#navBox { position: relative; width: 950px; margin: 0 auto 0 auto;   }
	
	#site {width: 950px; margin: 0 auto; clear: both; position: relative;  }
		.home #site { }
		.wallpaper #site { width: 980px;}
		#content { }
			.home #content {z-index: 80; position: relative;  margin-bottom: -30px }

	.home #blurbs {position: absolute; width: 350px; height: 150px; bottom:17px; left: 50px; border: 1px solid #ccc; padding: 5px; }
	#content #blurbs p {margin: 0 0 1em 0; font-size: 11px; }

	#footerBox {position: relative;  width: 100%;   margin: 0 auto; padding: 20px 0 0 0; clear: both; float: left; z-index: 10;  
			background: url(images/footer-tile.jpg) left 20px repeat-x; }
	.home #footerBox {  }
		#footer {width: 950px; padding: 88px 0 30px 0; margin: 0 auto;  position: relative;
				background: url(images/footer-city.jpg) top right no-repeat;}



/*** navigation ***/
#navBox { }
.home #navBox {display: none; }
	#nav {position: relative; float: left;   margin: 0 0 0 0; }
	#nav li { float: left; width: 155px; height: 21px; }
		#nav a, #nav a:visited { display: block; width: 115px; height: 21px; background-position: top left; background-repeat: no-repeat;   
				text-indent: -9999px; overflow: hidden;}
		#nav a:hover, #navlinks a:active { background-position: bottom left;   }
	#nav li ul {display: none; position: absolute; left: 00px; z-index: 50; background: #fff; border-bottom: 1px solid #aaa; }
	#nav li ul.downloadsSub {padding-left: 170px; width: 780px;  }
	#nav li ul.servicesSub {padding-left: 260px; width: 690px;     }
	#nav li:hover ul, .downloads #nav li ul.downloadsSub, .services #nav li ul.servicesSub {display: block;   }
	#nav li:hover ul { z-index: 200; }
		#nav li ul li {display: block; width: 150px; height: auto; float: left;  text-align: center;}
			#nav li ul li a, #nav li ul li a:visited {font-size: 1.3em;  font-family: "Trebuchet MS", verdana; color: #003366; text-indent: 0; height: auto; width: auto; padding: 5px;   background: #fcfcfc;   }
			#nav li ul li a:hover {color: #00CCFF; }
				
		
	#nav a.web { background-image: url(images/web.png);  }
	#nav a.code {margin-left: 20px; background-image: url(images/code.png); }
	#nav a.graphic {  background-image: url(images/graphic.png);}
	#nav a.services {margin-left: 30px;  background-image: url(images/services.png); }
	#nav a.downloads {  background-image: url(images/downloads.png); }
	#nav a.contact {width: 74px; float: right; background-image: url(images/contact.png); }
	
	.web #nav a.web { background-position: bottom left;  }
	.code #nav a.code { background-position: bottom left;  }
	.graphic #nav a.graphic { background-position: bottom left;  }
	.services #nav a.services {  background-position: bottom left;  }
		.serviceshome #nav a.servicehome {   font-weight: bold; }
		.testimonials #nav a.testimonials {   font-weight: bold;  }
	.downloads #nav a.downloads { background-position: bottom left;  }
		.ge #nav a.ge {   font-weight: bold; }
		.wallpaper #nav a.wallpaper {   font-weight: bold;  }
		.stock #nav a.stock {   font-weight: bold;  }
		.lazy-gallery #nav a.lazy-gallery {   font-weight: bold;  }
	.contact #nav a.contact { background-position: bottom left;   }



/*** specials **/
	
#noIE {width: 100%;  position:absolute; display: block;  top:30px; left:0; border-top: 1px solid #444; border-bottom: 1px solid #444;
		 background: #f2de9a;  text-align: center; z-index: 250;
		 padding: 10px 0;
		 filter:alpha(opacity=80);	-moz-opacity: 0.80;	opacity: 0.80; }
	#noIE a {font-family: "trebuchet MS";  font-size: 14px;  padding: 10px; }
	#noIE a span { }
	#noIE a:hover { }
	#noIE[id] {display: none; }




/*** styling ***/


h1 { font-size: 1.8em; line-height: 1.8em; font-family: "Trebuchet MS", verdana, arial, sans-serif; padding: 25px 0 0 0; clear: both; color: #333;}
	.home h1 {display: none; }
h2 { clear: both; font-size: 1.4em; margin: 1.5em 0 1em 0; padding: 0 0 3px 0; font-family: "Trebuchet MS", verdana, arial, sans-serif; font-weight: bold; border-bottom: 1px solid #f0f0f0;  color: #333;}
#ibox h2 {margin-top: 0; }
	.services h2 {margin-top: 2.5em; }
	.home h2 {margin-left: 50px; }
	h2.callout {font-size: 2.6em; text-transform: lowercase; letter-spacing: .1em; }
	.example h2 {margin-top: 40px;  font-size: 1.5em; border-bottom: 1px solid #ddd; padding-bottom: 10px;   }
	h2 .sub {font-size: 11px; }
	
h3 { font-size: 1.2em;  margin: 1.5em 0 1em 0;  padding: 0 0 3px 0; font-family: "Trebuchet MS", verdana, arial, sans-serif; }

a:link, a:visited {color:#0066CC; text-decoration: none;}
a:hover, a:active {color:#33ccFF;  }


a img {border: 1px solid #000; }
a:hover img {border: 1px solid #569bb8; }

#content p {font-size: 1.2em; margin: 1em 0; line-height: 1.4em; }
	#content p strong {font-weight: bold; }
	
blockquote {font-size: 1.0em; line-height: 1.4em; margin: 1em 3em;  }
	blockquote strong {font-size: 1.0em; font-weight: bold; float: right; text-align: right;}
	blockquote strong a {font-weight: normal; padding: 3px 0; }

.breaker {background: url(images/breaker.png) center top no-repeat; }
	#content.breaker {background-position: center 18px; }

#content p.intro {	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em; color: #145a7b; dispaly: none;  }
.home #content p.intro {text-align: center; clear: both; width: 680px; margin: 20px auto 10px auto;  font-size: 1.7em; 
		text-align: right; position: absolute; top: -42px; right: 52px; width: 450px; font-size: 1.3em; font-weight: bold;   }
		p.intro a {color: #e9c032; }
		p.intro a:hover {color: #fa5901; }

#content p.latest {text-align: center; font-size: 1.1em; font-family: "Trebuchet MS", verdana, arial; margin: 2em auto !important;  }
	p.latest strong {font-weight: bold; }
	p.latest strong span { font-weight: normal; color:#bbb; }
	p.latest a {margin: 0 .5em; color: #9b9b9b; }
	p.latest a:hover {color: #0066FF; }

p.secondary {text-align: center;  }

/* p.break {padding-bottom: 40px; border-bottom: 1px solid #ccc; margin-bottom: 40px !important; } */

#content ul {font-size: 1.2em; line-height: 1.4em;}
	
		
.twoCol {}
	.twoCol.wide {float: left; width: 680px; margin-right: 40px; }
		.contact  .twoCol.wide {width: 600px; }
	.twoCol.narrow {float: left; width: 230px;}
		.contact  .twoCol.narrow {width: 310px; }
	.twoCol.half {float: left; width: 400px; }
	
.threeCol {}
	.threeCol.first {width: 300px; margin: 0 40px 0 0; float: left; }
	.threeCol.second {width: 220px; margin: 0 40px 0 0; float: left; }
	.threeCol.third {width: 300px; margin: 0 0 0 0; float: left; }

.fourCol {width: 100%;  }
	.fourCol li {float: left; width: 25%; margin:0; padding:0; text-align: center; padding: 0 0 20px 0;}




				
/*** main bucket list on home page ***/
ul.bucket {margin-left: 46px; padding-top: 28px;  }
	ul.bucket li {position: relative; float: left; padding: 0 20px 15px 20px; }
		ul.bucket a {width: 246px; height: 173px; display: block;  text-indent: -9999px; overflow: hidden;
				background-position: top left; background-repeat: no-repeat; }
		ul.bucket a:hover {background-position: bottom left !important; }
		ul.bucket a.secondary {height: 49px;   }
		
		ul.bucket a.web {background: url(images/cta-web.jpg); }
		ul.bucket a.code {background: url(images/cta-code.jpg); }
		ul.bucket a.graphic {background: url(images/cta-graphic.jpg); }
		ul.bucket a.services {background: url(images/cta-services.jpg); }
		ul.bucket a.downloads {background: url(images/cta-downloads.jpg); }
		ul.bucket a.contact {background: url(images/cta-contact.jpg); }

ul.recent {width: 900px;  height: 180px; margin: 0 auto 0 30px;  }
.home ul.recent {width: 480px;  height: 180px; margin: 0 auto 0 430px;  }
	ul.recent li {text-align: left; display: block; padding: 0 40px 0 0; float: left; font-size: 10px;}
	ul.recent strong {font-size: 11px;  }
	ul.recent img {height: 110px; }



/*** splash grid on projects landing pages ***/
ul.splash {clear: both;  }
	ul.splash li {float: left; width: 250px; height: 195px; padding: 0 25px 0px 25px; font-size: 0.8em; text-align: center; color: #707783; }
	ul.splash.tall li {width: 178px; height: 240px; padding: 0 0px 20px 0px; }
	ul.splash.tall.five li {width: 160px; padding: 0 10px 20px 10px; }
	ul.splash li.two {width: 400px; }
	ul.splash li.three {width: 850px; }
		ul.splash li img {width: 220px; margin: 0;}
		ul.splash.tall li img {width: 125px; height: 200px; }
		ul.splash li a img {border: 3px solid #bbb; }
		ul.splash li a:hover img {border: 3px solid #00CCFF; }



/*** example with images, projects section ***/		
.example {float: left; width: 728px; 
		/*border-right: 1px solid #999999;*/ padding: 0 0 0 0;  }
	.example.landing  {width: 900px; padding: 0;  }
	.example p {margin: 1em 0; }
	.example img { margin: 0 10px 10px 0px;  }
	
	.example ul {}
		.example li {float: left; width: 33%; font-size: 0.9em; padding: 0 0 10px 0; margin: 0 0 20px 0; text-align: center; border-bottom: 1px solid #ccc;}
		.landing li {border: none; margin: 0; }
		.example li.two { width: 50%; }
			.example li.two img { }
		.example li.three { width: 99%; }
			.example li.three img { }
	.example ul.two {}
		.example ul.two li { width: 50%; }
			.example ul.two li img {height: 200px; }
	.example ul.tall li {height: 365px; }

ul.pages {width: 100%; }
	ul.pages li {width: 100px; padding: 3px 10px; text-align:center; border: 1px solid #ccc; }
	ul.pages li.prev {float: left; }
	ul.pages li.next {float: right; }
	
	
	

/* testimonials */
p.testimonial {width: 680px; clear: both; margin: 1.5em 2em; padding: 0 0 1.5em 0; border-bottom: 1px solid #ccc; overflow: auto; }
	.twho {font-size: 1.0em;  font-weight: bold;   }
	.tfrom { font-style:italic; font-size: 1.0em; margin-left: 2em;  }
	.tsite {font-size: 0.9em; margin-left: 2em; }
	.tpic {float: right; height: 140px; margin: 0 1em 1em 2em; }
		span.tpic {width: 230px; }


dl.grid {width: 200px; font-size: 1.0em;  float: right; margin-top: 50px; }
	dl.grid dt {width: 100%; clear: both; font-weight: bold; margin: 15px 0 4px 0; padding: 0 0 3px 0;
			border-bottom: 1px solid #bbb;  }
	dl.grid dd {width: 90px; height: 90px; display: block;  margin: 0 10px 0 0; float: left; overflow: hidden; }
		dl.grid dd img {width: 78px; clear: both; }
	dl.grid a {width: 100%; height: 100%; display: block; }
		dl.grid dd {display: none; }
			dl.grid dd a {color: #555E75; }
			dl.grid dd a:hover {color: #fa5901; }
		.landing dl.grid dd {display: block; }
		.web dl.grid dd.web {display: block; }
		.code dl.grid dd.code {display: block; }
		.graphic dl.grid dd.graphic {display: block; }
		.art dl.grid dd.art {display: block; }
		.testimonials dl.grid dd {display: block; }



.hidden {display: none; }
.clear {clear: both; width: 100%; }		
.left {float: left; }
	img.left {margin-right: 1em; }
.right {float: right; }		
	img.right {margin-left: 1em; }


tt {}

.smalltext { }


#footer { color: #9a9a9a;}
	#footer a { color: #555E75; }
	#footer a:hover {color: #fa5901;}
	
	 .homecrumbs {position: absolute; top:5px; left:60px; width: 790px;  text-align: center; }
		 .homecrumbs li {float: left; text-align: center; font-size: 1.1em; font-family: "Trebuchet MS", verdana, arial; margin: 2em auto !important;  }
		 .homecrumbs li strong {font-weight: bold; }
		 .homecrumbs li strong span { font-weight: normal; color:#bbb; }
		 .homecrumbs li a {margin: 0 .5em; color: #939393; }
		 .homecrumbs li a:hover {color: #0066FF; }
		
	#footer .forge22 {float: left; padding-bottom: 10px; }
	#footer .forge22 strong a { }
	#footer .xhtml {float: right;  padding-bottom: 10px;}
		#footer .xhtml li {float: left; margin-right: 2em; }
		
	#footer ul.breadcrumb {font: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; clear: both; border-top: 1px solid #ccc; margin: 0 auto; padding-top: 5px; }
	.home #footer ul.breadcrumb {display:none; }
		#footer ul.breadcrumb li {float: left; margin: 3px 5px; }
		#footer ul.breadcrumb a, #footer ul.breadcrumb a:visited {color:#909090; }
		#footer ul.breadcrumb li a:hover {color: #0066FF; }