@charset "UTF-8";

/* MAGNET PRODUCT DESIGN AND DEVELOPMENT */
/* MASTER STYLE DOCUMENT */
html {height:100%;}
body {
	margin:0 auto;
	padding:0;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	text-align:center;
	color:#000;
	font-size:smaller;
	height:100%;
}
body.purpose, .whoops { background-color:#9A5; }
body.process { background-color:#498; }
body.passion { background-color:#C21; }
body.portfolio,.case { background-color:#F83;}
body.contact { background-color:#822; }

#container {
	min-width:600px;
	margin:0;
	padding:0;
	position:relative;
	height:auto !important;
	height:100%;
	min-height:100%;
}

a {
	color:#D41;
}
a.visited {
	color:#498;
}
h2 {
	font-size:1.4em;
	color:#C50;
	font-weight:normal;
	color:#000;
}
h3 {
	font-size:1.2em;
	padding-bottom:.25em;
	border-bottom:1px solid #AAA;
	color:#C50;
	clear:right;
}
p {
	line-height:1.4em;
	color:#464646;
	margin:0 0 1em;
}
ul {
	color:#464646;
}
li {
	line-height:1.4em;
}

#header {
	height:35px;
	background:#000;
	width:100%;
	min-width:600px;
	z-index:10;
	margin:0 0 30px;
}
#header a {
	display:block;
	float:right;
	margin:10px 20px 0 0;
}

#content {
	margin:-1px auto 0;
	text-align:left;
	width:80%;
	min-height:400px;
	min-width:525px;
	padding-top:10px;
	background-color:#FFF;
	position:relative;
}

.leftCol {
	float: left;
	margin:0 0 15px 15px;
	width: 25%;
	}
.rightCol {
	float:right;
	width: 25%;
	margin-right:15px;
	z-index: 3;
}	
.centerCol {
	margin: 0px 30% 15px 30%;
	padding-left:5px;
}
.mainCol {
	margin:0 15px 0;
	padding:0 5px;
	height:340px;
	overflow:auto;
}
.floatRt {
	float:right;
	margin:0 0 5px 15px;
	display:block;
	clear:right;
}
.floatLft {
	float:left;
	margin:0 15px 0 0;
	display:block;
}

#top {
	margin:0 auto;
	width:80%;
	min-width:525px;
	height:18px;
}	
#top td {
	background:url(/graphics/global/rnd_t.png) no-repeat top left;
	width:50%;
	height:18px;
	min-width:263px;
	padding:0;
}
#top .right {
	background-position: top right;
	min-width:262px;
}
.portfolio #top td {
	background-image:url(/graphics/portfolio/rnd_t.png);
}

#btm {
	margin:0 auto;
	width:80%;
	min-width:525px;
	height:12px;
	clear:both;
}
#btm td {
	background:url(/graphics/global/rnd_b.png) no-repeat top left;
	width:50%;
	min-width:263px;
	height:12px;
	padding:0;
}

#btm .right {
	background-position: top right;
	min-width:262px;
}

/* CONTENT BORDER BACKGROUND FIX */
* html #top td { background-image:url(/graphics/global/rnd_t_ie.gif); }
* html .portfolio #top td { background-image:url(/graphics/portfolio/rnd_t_ie.gif); }
* html #btm td { background-image:url(/graphics/global/rnd_b_ie.gif); }

/* CONTACT US */

form {
	margin:0;
	padding:0;
}
form ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
form li {
	padding:0;
	margin:0;
	color:#555;
	font-size:.9em;
} 
.formButtons {
	text-align:center;
}
label {
	color:#555;
	display:block;
	font-size:.9em;
}
input.text {
	border:1px solid #CCC;
	width:90%;
	display:block;
	margin-bottom:.3em;
}
.state {
	width:20%;
	float:left;
}
.zip {
	width:50%;
	float:right;
}	
.rightCol textarea {
	width:90%;
	margin-bottom:1em;
}

/* SECONDARY NAVIGATION */

.subNav {
	width:100%;
	min-width:600px;
	background:#5C5C5C url(/graphics/nav/subnav_bg.gif) repeat-x top;
	position:absolute;
	bottom:30px;
	left:0;
	padding:5px 0;
	z-index:10;
}
.bioNav {
	bottom:55px;
	z-index:5;
}
.subNav ul {
	list-style-type:none;
	margin:0 17px 0 35px;
	padding:0;
}
.subNav li {
	margin:0;
	padding:0 25px 0 0;
	float:left;
	font-size:.95em;
	line-height:1.0em;
}
.subNav a {
	color:#FFF;
	text-decoration:none;
}
.subNav a img {	
	border:1px solid #FFF;
	margin:1px;
}
.subNav a:hover img {
	border-width:2px;
	margin:0;
}

/* BOTTOM-NAV HEIGHT FIX */
body.purpose #Zspacer { padding:0 0 70px; }
body.process #Zspacer { padding:0 0 70px; }
body.passion #Zspacer { padding:0 0 70px; }
body.people #Zspacer { padding:0 0 120px; }
body.portfolio #Zspacer { padding:0 0 120px; }
body.contact #Zspacer { padding:0 0 40px; }

/* PRIMARY NAVIGATION */
	
#primaryNav {
	height:30px;
	width:100%;
	min-width:600px;
	position:absolute;
	bottom:0;
	left:0;
	background:#000 url(/graphics/nav/bottom_bg.gif) top;
	z-index:10;
}
#primaryNav ul {
	list-style-type:none;
	margin:0 0 0 25px;
	padding:0;
}
#primaryNav li {
	padding:0 1px 0 0;
	margin:0;
	float:left;
	text-align:left;
	line-height:1.0em;
}
#primaryNav a {
	width:92px;
	height:24px;
	padding:0;
	display:block;
	color:#FFF;
}
#primaryNav a:hover {
   background: url(/graphics/nav/tab_o.gif) top left no-repeat;
}
.purpose #primaryNav #purpose a,
  .process #primaryNav #process a,
  .passion #primaryNav #passion a,
  .portfolio #primaryNav #portfolio a {
	 background: lime url(/graphics/nav/tab_a.gif) top left no-repeat;
}
.contact #primaryNav #contact a {
  background: lime url(/graphics/nav/tab_contact.gif) top left no-repeat;
}

#primaryNav #contact {
	float:right;
	margin:0 25px 0;
}

/* CASE STUDIES */

.portfolio h1 {
	margin:0 0 0 100px;
	padding:0;
	height:75px;
}
.casePhoto {
	position:absolute;
	right:4%;
	top:105px;
	z-index:30;
}
.caseLinks {
	margin:0 auto;
}
.caseLinks td {
	padding:0 1em .5em;
	text-align:center;
	width:115px;
	font-size:.72em;
}
.caseLinks img {
	border:1px solid #5C5C5C;
}
.caseLinks .names {
	vertical-align:top;
}
	
#caseNav {
	position:absolute;
	width: 100px;
	top:10px;
	left:0;
	z-index:50;
	
}
#caseNav ul {
	list-style-type:none;
  margin:0;
  padding:0;
	width:88px;
}
#caseNav li {
	margin:1px 0 0;
	padding:0;
	width:88px;
	height:20px;
	background-color:lime;
}
#caseNav a {
	display:block;
	width:88px;
	background:url(/graphics/portfolio/casenav_bg.gif) no-repeat top left;
	height:20px;
}
 .overview #overview a,
	.approach #approach a,
	.evolution #evolution a {
		background-image:url(/graphics/portfolio/casenav_bg_a.gif);
}

#caseNav a:hover {
	background-image:url(/graphics/portfolio/casenav_bg_o.gif);
}
#caseColumn {
 	padding: 0;
	pargin:0 25px 15px 25px;
	min-width:240px;
}
#overviewColumn {
 	padding: 0;
	margin:0 220px 0 0;
	min-width:240px;
	position:relative;
}
.isFull {
	margin-right:25px;
}
#sidebar {
	float: right; 
	width: 160px;
	margin:60px 10px 0;
}
.scrollContent {
	height:300px;
	overflow:auto;
	padding:0 25px 0 0;
	margin-left:100px;
	margin-right:15px;
}

/*body.case01 {
	background-image:url(/graphics/portfolio/case01/bg.jpg);
}
body.case02 {
	background-image:url(/graphics/portfolio/case02/bg.jpg);
}
body.case03 {
	background-image:url(/graphics/portfolio/case03/bg.jpg);
}
body.case04 {
	background-image:url(/graphics/portfolio/case04/bg.jpg);
}
body.case05 {
	background-image:url(/graphics/portfolio/case05/bg.jpg);
}*/

/* BIOS */
.bioRight {
	width:190px;
	float:right;
}
.bioLeft {
	width:96%;
	float:left;
	margin-right:-190px;
}
.bioPhoto {
	margin:0 15px 15px 15px;
	display:block;
}
.bioText {  
	margin-right: 200px;
}
.bioText h3 {
	margin-bottom:0;
	margin-top:0;
	border:none;
}
.title {
	font-style:italic;
}
.bioFacts {
	width:175px;
	float:right;
}
.bioFacts li {
	margin-bottom:1em;
}
.bioFacts b,strong {
	color:#000;
}

/* ADDITIONAL FORMATTING */

.process h3 {
	clear:both;
}
.callout {
	font-size:1.4em;
	padding:1em;
	margin:1em 0;
	border:1px solid #CCC;
	border-width:1px 0;
	color:#9A5;
	text-align:center;
	clear:both;
}
.callout .byline {
	color:#9A5;
	font-size:.8em;
	font-style:italic;
}
.clients {
	list-style-type:none;
	margin:0 0 0 2em;
	padding:0;
}
.clients li {
	padding:.25em 0;
}
.indent {
	margin: 0 0 0 1em;
}
.caption {
	width:200px;
	margin:.5em 0 1em;
	font-style:italic;
	font-size:.85em;
	line-height:1.2em;
}
.noBullet {
	list-style-type:none;
	margin:0;
	padding:0;
}
.footnote {
	font-style:italic;
	font-size:.8em;
}
.error {
	padding:.5em .75em;
	background:#FF6;
	border:1px solid #FF0000;
	font-size:.95em;
}

/* PNG TRANSPARENCY FIX */
/* Special thanks to Angus Turnbull - http://www.twinhelix.com */

img { behavior: url(/inc/iepngfix.htc);