/* fixed width centered page 
http://www.pmob.co.uk/temp/3colcentred_2a.htm
http://www.pmob.co.uk/temp/3colcentred_2.css*/


html, body { font: 100% Arial, Helvetica, Verdana, sans-serif; padding:0; margin:0;}

body {
	background:black /*url(images/grid.gif) no-repeat center*/; 
	color: #ccc;
	font-size: 80%;
	text-align:center; }

/* eliminate all default padding, margins, and borders - must declare some margin/padding for any ul or ol */
* {padding: 0;margin: 0;border: none;}

/* tables */
table {border-collapse: collapse;border-spacing:0;}
table, td, caption { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit;}

/*** text format  ***/
pre, code { font-size:1em;}
strong, b {font-weight: bold;}
  
h1, h2, h3, h4, h5, h6 { color: #ccc; margin-top: 1em;}
h1 { font-size: 1.8em; margin: 0 0 1em 0;}
h2 { font-size: 1.3em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.1em;}
h5 { font-size: 1em;}

a:link {color:#ddd; text-decoration: underline;}
a:visited {color:#ddd; text-decoration: underline;}
a:hover {color: #fff;}
a:active {color: #fff;}
a img  {border: none;}

ol, ul, li { font-size: 1.0em; line-height: 1.3em; margin: .4em 0 1em 1.5em;}
li { margin: .3em 0 .3em 1.5em;}

blockquote {margin: .5em 0 .5em 1.5em;}
hr {height:0; border-bottom: 1px solid #CCC;margin:10px 0;color:black;background:black; }

p { font-size: 1.0em; 
    line-height: 1.4em; 
	padding:.5em 0 .5em 0;}
li > p { margin-top: 0.2em;}


/***** layout *****/

#outer { width:900px; text-align:left;  position:relative; margin:auto; padding:0;background:#000;} 


#header {/*position:absolute;*/ width:300px; height:100px;  /* background:pink;*/ }
#headerimg {position:relative; top:15px; left:25px;}


/**** nav -- use KHP-nav2 with span ****/
.nav {margin:0 0 20px 25px; padding:0; position:relative;width:850px; /*background: #111;  border-bottom:5px solid white;*/  }

.nav p {margin:0; padding:3px 0;font-size:11px;line-height: 14px; }
.nav p img  {margin: /*8px*/0 12px 0 0;}
.nav p a {padding:4px 12px 4px 0;text-decoration:none; font-weight:bold;text-transform:capitalize;white-space: nowrap; color:#999; background:#000;}
.nav p a:hover { color:#fff;background:#000; }

.nav p span    {position:absolute;bottom:0;left:375px; }
.nav p span a  {font-size: 12px;line-height: 18px;padding:5px 12px 1px 0;text-transform: capitalize;}

#body_hom     .nav p a.hom, 
#body_contact .nav p a.contact,
#body_clients .nav p a.clients,
#body_tear    .nav p a.tear,
#body_portfolio .nav p a.port { color:#fff;background:#000;font-size:12px; }

#body_archi   .nav p a.archi,
#body_product .nav p a.product,
#body_people  .nav p a.people,
#body_bw      .nav p a.bw,
#body_art     .nav p a.art { color:#fff;background:#000;font-size:14px; }  /* */


/**********   left   *********/
#left {
	position:relative; /* ie needs this to show float  */
	display:inline; /* so ie doesn't double the margin on floated element */
	float:left;
	width:350px;
	margin:0 0 0 25px;/* background:green; */}
									   
#left p {/*padding-left:10px;*/padding-right:25px;}


/**********   content  *********/

/* * html #content {height:1%;margin-bottom:8px} combat IE's 3 pixel jog */

#content {
	width:500px;
	margin: 0 0 0 375px;
	padding: 0;
	color:white; background:#ee3942; /* red background */
	/*	color:#ddd; background:#333;*/ }
	
#outer.high #content, #outer.high #footer {position:relative;top:-160px;}/*move content to top and footer up same distance*/
#redbox {padding: 45px 20px 20px 20px;} /* content bg shows through */
#redbox h1 {color:white;font-size:13px;line-height:20px;margin-bottom:40px;}
#photonav p {width:90px;float:left; margin:0;padding:0;text-align:center; font-weight:bold;font-size: 10px;line-height: 15px; background:#ee3942;/**/}
#photonav p a:link {text-decoration:none;color:#fff;}
#photonav p a:visited {text-decoration:none;color:#fff;}
#photonav p a:hover {text-decoration:none;color:#333;}

.light  {color:#111;background:#f5f5f5;padding:20px 50px 20px 50px;}
.light h1 {color:#ee3942;}
.light h2, .light h3, .light h4 {color:#111;}
.light a:link {color:#ee3942;}
.light a:visited {color:#ee3942;}
.light a:hover {color:red;}


#clearfooter {clear:both; width:100%; height:2em;   } 


/**********   gallery  *********/

#gallery {clear:both;width:850px; height:490px; margin:0 0 0 25px; padding:0; position:relative; background: black;/*border:1px solid #333;*/}
#gallery b.default {position:absolute; left:375px; top:0px; width:450px; height:450px; text-align:center; }
#gallery b.default img {display:block; margin:0 auto 10px auto; /*border:1px solid #eee; border-color:pink blue green yellow;*/}
#gallery b.default span {display:block; color:#ccc; font-weight:normal; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:350px; position:relative; float:left;}
#gallery ul li {display:inline; width:100px; height:100px; float:left; margin:0 15px 15px 0;}
#gallery ul li a {display:block; width:100px; height:100px; text-decoration:none; border:1px solid #000; border-color:#555 #333 #222 #444;/**/}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:100px; height:100px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#222 #444 #555 #333; background:#222;}
#gallery ul li a:hover b {position:absolute; left:375px; top:0; width:450px; height:450px; text-align:center; background:black; z-index:20;}
#gallery ul li a:hover span {display:block; font-weight:normal; color:#ccc;/* font-size:11px;*/ width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #000; /*border-color:#555 #333 #222 #444;*/}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #333 #222 #444; background:#222;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:375px; top:0; width:450px; height:450px; text-align:center; background: black; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; font-weight:normal;color:#ccc; /* font-size:11px;*/ width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; /*border:1px solid #eee; border-color:#555 #333 #222 #444;*/}


/**********  footer  *********/
#footer {
	width:850px; /* for centered layout */
	clear:both;
	font-size:1.1em;color: #888; margin:0 25px;padding:10px 0;border-top:2px solid #222; }

#footer p.contact { width:325px;float:left;line-height:1.2em;}
#footer p.copyright {width:450px;margin-left:375px; font-size:1em;line-height:1.2em;}
#footer p.designcredit a {color: #333;text-decoration: none; font-size:.9em;}
#footer p.designcredit a:hover {color: #777;}

ul#footernav {list-style-type: none;margin: 0; padding:10px 0;text-align: center; }
ul#footernav li { display: inline; list-style:none; margin: 0; padding:0;}
ul#footernav li a { white-space: nowrap; text-decoration: none; margin:0;padding: 0.2em 0.75em 0.2em 0.5em;line-height:2em;}
ul#footernav li a:hover {/*text-decoration:underline;*/ color:white;background:black;}


.nowrap {white-space: nowrap;}
.clear{clear:both;}
.smaller {font-size:.8em}
.red { color: #990000;}



.clearfix:after { content: ".";  display: block; height: 0; clear: both; visibility: hidden;} /*p.i.e.*/
/*.clearfix {display: inline-table;} original clearfix replaced with below */
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/** layout based on www.pmob.co.uk/temp/3colfixedtest_4.htm -- thanks Paul!
Other CSS credits to http://www.positioniseverything.net/ -- thanks Holly & John!!   **/