/* Dan Wooodward 4.0 - August 28 2008  */


/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* For transparent png imgs, even though I don't use any, but I will. */
* { behavior: url(imgs/iepngfix.htc) }
img, div {behavior: url(imgs/iepngfix.htc)}	

body{background:#FFF;width:100%;}
.header {padding: 36px 0 34px 0;position:relative;}
.footer1 {margin: 38px 0 9px 0; padding: 19px 0 19px 0;width: 100%; background-color:#F1f1f1;}
.footer {font-size:1.2em;margin: 144px 0 0 0; padding: 26px 0 26px 67px;bottom:0;position:relative;background-color:#F1f1f1;}

/* Typography */
body { font-size: 62.5%; } /* Reset default 16px to 10px and work up from there (0.625 * 16px = 10px) */
html>body {font-size: 10px; /* non-IE */}
body { color: #222; font-family: Helvetica,Arial,Geneva,sans-serif;}

/* Headings
----------- */

h1,h2,h3,h4,h5,h6 {color: #000;}
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 {font-family: Helvetica, Arial, sans-serif; font-size: 2.0em;font-weight:bold;font-weight:bold; margin-bottom: .8em;  margin-top: 1em; line-height:1em; }
h2 { font-size: 1.5em; margin-top: .615em;margin-bottom: .615em; line-height:1.23em; }
h3 { font-size: 1.6em; font-weight: bold; margin-top:1.1875em;margin-bottom:1.1875em;line-height: 1.1875em; }
h4 { font-size: 1.6em; margin-top:1.1875em;margin-bottom:1.1875em;line-height: 1.1875em; }
h5 { font-size: 1.3em; font-weight: bold; margin-bottom: 1.46em;margin-top: 1.46em; line-height: 1.46em; }
h6 { font-size: 1.3em; font-weight: bold; }


/* Defaulto Text elements */
p           { margin: .8em 0 .8em; line-height: 1.6em; font-size: 1.3em; }
div.doc p { font-size: 1.6em; margin-top:.8125em;margin-bottom:.8125em;line-height: 1.625em; }
p.last      { margin: 0; }
p img       { float: left; margin: 0; padding: 0; }
p img.top   { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
img         { margin: 0; padding: 0; border: none; }

ul, ol      { margin:1.3em 1.3em 1.3em 1.3em; }
ul          { list-style-type: none; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin-top: 1.5em; font-style: italic; }
del         { color:#666; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } 
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }

/* LINKSOLOGY */
a           	{ color: #ff4446; margin: 0; padding: 0; text-decoration: none;}
a:focus,a:hover { color: #e7c300; text-decoration: underline; }
a:visited   	{ text-decoration: none; color: #ff4446; margin: 0; padding: 0;}
a img       	{ margin: 0; padding: 0; }

a.selectedLink,a.aboutLink{color: #ff4446; border-bottom:1px solid #FF4446; }
a.selectedLink:hover{border-bottom:1px solid #FFF; text-decoration: none;}
a.selectedLink:active{border-bottom:1px solid #ff4446; text-decoration: none;}
a.selectedLink:visited{border-bottom:1px solid #ff4446; text-decoration: none;}

ul.imageNav li a:hover {text-decoration: none;}
ul.projNav li a:hover {text-decoration: none;}


/* Special Use Case Classes or SUCC's
-------------------------------------------------------------- */

p.headerinfo    { margin: 0; font-size: 1.2em;line-height: 1.58em }
.footer1 p		{padding: 0 .3em 0 .3em;}
.footer p.colophon	{padding: 0 .3em 0 .3em;}
.projDesc p 	{margin: 0 0 0 5px;width:457px; font-size:1em; }

img.descpullimg {margin-left:50px;}

ul.sitemap		{ margin-left: 1.3em; font-size: 1.3em;}
ul.sitemap ul	{ margin-left: 1.3em;}
ul.projNav { float:left; margin: 0; padding:0;}
ul.projNav{color:#F2F2F2;margin-left:200px;}
ul.projNav li a {padding:0 5px 0 0;color:red;border-right:2px solid #CCC;}
ul.projNav li:last-child a {border:none;}
ul.projNav li a:hover {color:#222;}
ul.imageNav li 	{ float: left;font-size: 1.2em; line-height: .34em; margin: 0 5px 0 0;}
ul.projNav li 	{ float: left;font-size: 1.2em; line-height: .34em; margin: 0 5px 0 0;}

#projects, #catalog {position:relative;padding:0;margin;0;}


#projectnav {position:absolute; top:-125px; right:67px;}
/* Some special classes
-------------------------------------------------------------- */



.imghover {opacity:0.4;filter:alpha(opacity=40);}

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #000;font-size: 1em; }
.light      { color: #666; }

p.info, p.headInfo,p.colophon { 
	color: #000; 
	font-size: 1em;
	line-height: 1.6em;
	padding: 0 7px 6px 7px;
	margin: 0 0 20px 0;
	display:block;
	}
.projDesc p, .projDesc h1, .projDesc ul, .projDesc span {padding-left: 4px;}
.projDesc p {padding-top: .8em;padding-bottom: 1.2em;font-size: 1.2em;color:#000;}

.projDesc img.projectImg {float:left; padding:0 0 13px 7px;margin:0 13px 0 0;}

.descTop {float:left; margin-top: 0;}
p.info { 
	xborder-bottom:1px solid #000;
	display:none;
	}

.itemTitle, .bold {font-weight:bold;}

.sans		{ font-family: Helvetica,Arial,Geneva,sans-serif; }
.hide       { display: none; }
.highlight  { color: #ff4446; }
.added      { color:#060; }
.removed    { color:#900; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }



/* HEADER Logo sprite link */
#logoBtnimg{background-image: url(imgs/logonew.png);}
#logoBtnimg{width:178px;height:90px;}
.logoBtn{display:block;float:left;height:90px; background-position:top left; background-repeat:no-repeat; margin: 0px;}
A.logoBtn:link, A.logoBtn:visited{background-position:0% 0%;}
A.logoBtn:hover{background-position:0 100%;}

/* HEADER the rest */
.primnav 	{ 
	xbackground-image: url(imgs/dots.gif);  
	xbackground-position: left bottom;  
	xbackground-repeat: repeat-x;  
	margin: 0; height: 54px;
	}
.infoColumn {
	xbackground-image: url(imgs/dots.gif);  
	background-position: left bottom;  
	background-repeat: repeat-x; 
	padding-bottom: 30px;
	}

#catalog ul li {font-size:1.2em;}

ul.primnav { margin:0; }
ul.primnav li {xtext-align: center; margin: 0px 13px 0 0; width:67px; height:30px; float:left;}
ul.primnav li.navLast {margin: 0px 0;}
ul.primnav li a  {
	color: #000; 
	xborder-bottom:1px solid #FF4446; 
	margin-top:1.6em; 
	font-weight: bold; 
	text-decoration: none; 
	font-size: 1em;
	line-height: 1.6em; display: block;
	}
ul.primnav li a.selected  {xborder-bottom:1px solid #000;font-weight:normal}
ul.primnav li a:hover {xborder-bottom:1px solid #FFF; color: #ff4446; text-decoration: none;}
ul.primnav li a.selected:hover  {xborder-bottom:1px solid #000;}
ul.primnav li a:active    {xborder-bottom:1px solid #FFF;}
	
/* Front Page Big Text */

.textbox2	{background-color: transparent;padding: 13px;margin-bottom: 13px;}
.textbox404	{background-color: transparent;padding: 57px 62px 26px 26px;margin-bottom: 26pxpx;}
.errorbg	{height: 452px;background-image: url(imgs/bg404.jpg); background-position:left top; background-repeat: no-repeat;}
/* Project Detail */
.projitem 	{ 
background-color: #1c1c1c; 
margin-top: 13px;
height:170px; 
position:relative;}
.introitem 	{ 
background-color: #1c1c1c; 
margin-top: 13px;
height:170px; 
position:relative;}
.redbg{background-color: #ce1717;}
.bluebg{background-color: #474747;}
.iteminner {padding:13px;display:block;}
.iteminner p{color:#FFF;}


.projDetailBlock {margin-bottom: 98px;}



.imgNav {background-color: #FFF; padding: 0 10px 10px 10px; position:fixed; z-index:80;}



.imageblock {float:left;}
ul.projImages {margin:0;padding:0;}
ul.projImages li {float:left; display:inline;}
ul.projImages li {padding:0 0 13px 0;margin:0 13px 0 0;}
ul.projImages li + li {padding: 0 0 13px;}
ul.projImages li imgs {margin:0;padding:0:}

/* For crisp borders */
.logo{ xbackground-image: url(imgs/dot.gif);  background-position: left bottom;  background-repeat: repeat-x;}

.item {margin-bottom: 26px; height:54px;xbackground-image: url(imgs/dot.gif);  background-position: left bottom;  background-repeat: repeat-x; }

.hide {display: none;}


/* GRID */
.container {
  margin:0;
  padding:0 0 0 30px;
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: left;
  margin-right: 13px;
  position: relative;
}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 67px;}
.span-2  { width: 147px;}
.span-3  { width: 227px;}
.span-4  { width: 307px;}
.span-5  { width: 387px;}
.span-6  { width: 467px;}
.span-7  { width: 547px;}
.span-8  { width: 627px;}
.span-9  { width: 707px;}
.span-10 { width: 787px;}
.span-11 { width: 867px;}
.span-12 { width: 960px; margin: 0; }
.span-12g { width: 947px; margin: 0; } /* for full width columns embedded */


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 80px;}
.append-2  { padding-right: 160px;}
.append-3  { padding-right: 240px;}
.append-4  { padding-right: 320px;}
.append-5  { padding-right: 400px;}
.append-6  { padding-right: 480px;}
.append-7  { padding-right: 560px;}
.append-8  { padding-right: 640px;}
.append-9  { padding-right: 720px;}
.append-10 { padding-right: 800px;}
.append-11 { padding-right: 880px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 80px;}
.prepend-2  { padding-left: 160px;}
.prepend-3  { padding-left: 240px;}
.prepend-3alt  { padding-left: 227px;} /* for project detail page with fixed img nav */
.prepend-4  { padding-left: 320px;}
.prepend-5  { padding-left: 400px;}
.prepend-6  { padding-left: 480px;}
.prepend-7  { padding-left: 560px;}
.prepend-8  { padding-left: 640px;}
.prepend-9  { padding-left: 720px;}
.prepend-10 { padding-left: 800px;}
.prepend-11 { padding-left: 880px;}



/* Border on right hand side of a column. */
.border{
  padding-right:5.5px;
  margin-right:6.5px;
  border-right:1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right:61.5px;
  margin-right:60.5px;
  border-right:1px solid #eee;
}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */
.pull-1 { margin-left: -80px;}
.pull-2 { margin-left: -160px;}
.pull-3 { margin-left: -240px;}
.pull-4 { margin-left: -320px;}


.push-0  { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */
.push-1 { margin: 0 -80px 0 18px; float: right;}
.push-2 { margin: 0 -160px 0 18px; float: right;}
.push-3 { margin: 0 -240px 0 18px; float: right;}
.push-4 { margin: 0 -320px 0 18px; float: right;}

.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }